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

那么，問(wèn)題來(lái)了，嵌入圖片的方式不易于修改和維護(hù)。

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

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

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

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

本項(xiàng)目用到的是方正綜藝簡(jiǎn)體，我們就需要下載這種字體。另外，要保證下載的字體包里面含有以下幾個(gè)文件，如果沒有，從別的字體包里面拷貝過(guò)來(lái)也能用的。

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

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

@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- */

}

接著，需要對(duì)字體進(jìn)行聲明：

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

在這個(gè)項(xiàng)目里，我們用到的是方正綜藝簡(jiǎn)體。在樣式表里添加如下代碼聲明字體：

注意：字體的名字一定不要寫錯(cuò)，字體安裝文件的路徑和名字的字母大小寫不要寫錯(cuò)，因?yàn)長(zhǎng)inux系統(tǒng)的服務(wù)器會(huì)把同一個(gè)字母的大小寫看成兩種不同的字符。

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

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

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