以前CSS3的版本，網(wǎng)頁設(shè)計師不得不使用用戶計算機上已經(jīng)安裝的字體。

使用CSS3，網(wǎng)頁設(shè)計師可以使用他/她喜歡的任何字體。

當(dāng)你發(fā)現(xiàn)您要使用的字體文件時，只需簡單的將字體文件包含在網(wǎng)站中，它會自動下載給需要的用戶。

-----以上內(nèi)容摘抄自RUNOOB.COM

我由此想到了以前接觸過一種技術(shù)，即由美工用一些矢量繪圖工具，繪制一些ICON，然后通過一個網(wǎng)站(https://icomoon.io/app/#/select)，幫助我們生成一堆文件，生成完成后，這個ICON已經(jīng)變成了一種字體，也就是說，我們可以改變它的字體大小，字體顏色，hover事件等等。

值得一提的是，上面提到的網(wǎng)站，本身已經(jīng)提供了許多現(xiàn)成的ICON，供一些沒有美工幫助的前端人員去尋找自己需要的字體圖標(biāo)。

今天在看CSS3字體的時候，想到這個知識點，原因是當(dāng)初了解的不是很深，只是知道它的一個流程，原理并不清楚。

CSS3中，支持任何字體，以前的前端人員，在寫頁面的時候，字體基本上就是用微軟雅黑，宋體，仿宋等常見的字體，最重要的原因就是擔(dān)心如果用了一些不常見的字體，然后用戶電腦沒有安裝這種字體就會出現(xiàn)異常情況。

但CSS3彌補了這個缺陷。

我們可以通過以下方式，使用任何我們想用的字體，都不會出現(xiàn)異常：

@font-face{

　　font-family:'字體名稱(可自己定義)';

　　src:url(字體文件路徑)

}

以上代碼就幫助我們增加了一種新的字體，這個時候即使用戶電腦中沒有這種字體，我們也可以放心的使用

div{

　　font-family:'上面font-face中定義的font-family的名字';

}

那么現(xiàn)在問題來了，為什么會把這兩件事聯(lián)系起來？我還記得當(dāng)時問那個教我這個知識點的那個同事一個問題，引入了這個文件，所有的字體都會變成ICON形式的嗎，相當(dāng)于發(fā)明了一種新的字體嗎(現(xiàn)在想起來真是愚蠢)。

當(dāng)然不是。

這兩者的區(qū)別是，我上面寫的這個例子，是引入了一個完整的字體文件，它里面是包含了對所有已知漢字的對該字體的風(fēng)格化處理的，所以引入了這個字體文件，就可以保證網(wǎng)頁中用到的所有文字都是這個字體的風(fēng)格，但前面說到的圖標(biāo)字體，其實硬要說的話，也可以理解成一個字體文字(或者說本質(zhì)上就是)，但它里面只有一個文字，就是我們用到的那個ICON，我們只是通過某種技術(shù)，把它變成文字的格式了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/qinchuan/p/5564285.html

總結(jié)

以上是生活随笔為你收集整理的css3的自定义字体的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。