CSS 在頁面中引入自定義字體

在製做網頁的時候咱們經過會經過設置 font-family 來定義頁面字體，但有的時候系統自帶的字體並不能知足咱們的所有需求，爲了頁面的豐富性和美觀性，咱們可能須要在特定的地方使用一些特定的字體。
若是這個藝術字的內容是固定的，那咱們大能夠直接用切圖的方式來解決，好比網站的 Logo 這種；但有一些例如網站的標題，訂單數字等動態生成的內容，就沒辦法切圖了，這個時候咱們就能夠引入自定義的字體了。

自定義的字體的選擇

谷歌爲咱們提供了不少免費的在線字體可供選擇，打開 www.googlefonts.cn/# 國內鏡像（國內不能使用谷歌服務），選擇你中意的字體，生成代碼，使用 link 標籤引入到頁面中便可，很是的方便~

生成本地字體文件

若是以爲在線的字體不穩定，或者設計師已經提供了 設計稿裏面的字體文件，那咱們也能夠直接使用本地字體，這裏要推薦一個很好用的網站 www.fontsquirrel.com/，選擇 Generator ，上傳你的字體文件，像以前設計師提供給個人就是 ttf 格式。上傳以後，選擇 OPTIMAL 格式，點擊 DOWNLOAD YOUR KIT ，會下載下來一個壓縮包。

打開這個壓縮包，會發現各類格式的字體文件都已經生成好了，同時還生成了一個 css 文件，在這個文件裏面它已經自動給你生成好了 @font-face 並引入了字體文件，你只須要在頁面裏面引入這個 css 文件就可使用這個字體咯！

擴展

• 目前到項目裏面我只考慮了英文字體和數字字體的引入，由於中文字體文件實在是太大了，根本不必。看到其餘教程說到能夠用字蛛來壓縮，下次能夠試試。字蛛