前端 - 前端項目引入外部字體

前端項目引入外部字體

最近前端小朋友又遇到了一個問題，就是很多時候UI設計師設計出來的效果圖都包含一些特殊字體，而眾所周知，顯示字體的前提條件是安裝字體，可我們怎么能保證用戶每個人本地都安裝了我們需要的字體呢？

答案是把字體文件放到前端項目中。我以當前遇到的字體為例說明一下步驟。

注意：我們因為是寫Demo，所以不需要注意版權問題。在實際開發中一定要注意字體商用授權問題，不然會被告。

首先下載字體文件，我是在這個網站下載的：

https://www.fontke.com/font/list/2147/

然后把下載到的ttf文件放到項目中：

之后找到你的全局css文件，加入如下代碼：

/* 自定義字體引入 */
@font-face {
  font-family: DS-Digital-Bold;
  src: url(fonts/DS-Digital-Bold.ttf) format("truetype");
}

上述代碼中我改動了兩處，一處是下載下來的ttf文件名中包含空格，我把空格改成了連接線“-”。另一處就是src的字體文件引用路徑，這個路徑需要根據你自己放文件的地址自行修改。

到這里這個字體就已經引入到你的前端項目當中了，在之后的代碼里就可以用如下代碼來使用新引入的字體了：

font-family: DS-Digital-Bold, serif;

在這里又引出一個知識點 ，就是font-family最后一個屬性serif。

Serif的意思是，在字的筆划開始及結束的地方有額外的裝飾，而且筆划的粗細會因直橫的不同而有不同。相反的，Sans Serif則沒有這些額外的裝飾，筆划粗細大致差不多。如下圖：

最后添加一個這個的意思就是，如果自定義字體失效的話，就使用系統默認的serif字體。