當我們?yōu)g覽網(wǎng)頁的時候，會發(fā)現(xiàn)網(wǎng)頁上有一些不常用字體，但是這些字體在普通用戶電腦上是沒有安裝的。文匯小編發(fā)現(xiàn)，為了達到這種效果，前端人員往往會把這種字體做成圖片嵌入到網(wǎng)頁中。

那么，問題來了，嵌入圖片的方式不易于修改和維護。

因為當我們想要修改文字內(nèi)容的時候，必須用PS進行新的文字效果制作。如果你是網(wǎng)站的維護人員，而客戶發(fā)來通知催你改文字，而你眼下又沒有PS可以用的時候，就麻煩了。畢竟PS的安裝步驟是非常麻煩的，而且這套程序?qū)﹄娔X本身更的配置要求高。

為了避免這種情況發(fā)生，文匯小編建議大家使用字體在線安裝，把需要用的非常用字體安裝到網(wǎng)頁所在的服務(wù)器上，這個問題就輕松解決了。

那么，我們要怎樣安裝在線字體呢？下面，文匯小編以山東華力機電有限公司官方網(wǎng)站這個項目為例進行講解。

首先，需要去網(wǎng)上下載你所需要的字體：

本項目用到的是方正綜藝簡體，我們就需要下載這種字體。另外，要保證下載的字體包里面含有以下幾個文件，如果沒有，從別的字體包里面拷貝過來也能用的。

然后，在樣式表文件加入安裝字體的基礎(chǔ)代碼：

就是下面這些代碼,可以直接復制粘貼使用的。

@font-face {font-family: "iconfont";

  src: url('iconfont.eot'); /* IE9*/

  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('iconfont.woff') format('woff'), /* chrome, firefox */

  url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

接著，需要對字體進行聲明：

為了字體聲明的規(guī)范性，我們需要雙擊打開后綴名為.ttf或.TTF的字體安裝文件，查看字體名稱，如圖：

在這個項目里，我們用到的是方正綜藝簡體。在樣式表里添加如下代碼聲明字體：

注意：字體的名字一定不要寫錯，字體安裝文件的路徑和名字的字母大小寫不要寫錯，因為Linux系統(tǒng)的服務(wù)器會把同一個字母的大小寫看成兩種不同的字符。

最后，在使用已經(jīng)定義好的字體。

文匯小編提醒您，字體的名稱要對應(yīng)哦！

做完以上步驟，字體的在線安裝就完成了。我們來看一下效果：