CSS3乾貨12：CSS3 使用非系統字體

今天有同學問我怎麼在頁面中使用自定義字體。OK，那麼就寫一篇博文湊數~

一般，我們在頁面中使用字體都是系統自帶的。有時候爲了讓頁面效果更出彩，我們會使用一些好看的非系統字體。

如何在頁面中使用這些字體？

很簡單，把字體文件下載下來，放在 CSS 文件夾中，CSS 中使用代碼：

@font-face {
    font-family: 'myFont';  /* 給字體起個名字 */
    src:url("zcool_addict_italic.woff"),
        url("zcool_addict_italic.woff2");
    font-weight: normal;
    font-style: italic;
}


.box{
    font-family: myFont;  /* 使用字體 */
    font-size: 30px;
}

代碼中的 woff，woff2 就是我下載的字體文件。

使用前後對比：

問題來了，這個 woff 和 woff2 怎麼來的？

一般，我們windows使用的字體格式是 ttf ，可以通過以下網站對字體格式進行轉換：

https://www.fontke.com/tool/convfont/   中文的網站，不解釋。但是功能感覺沒下面的強大。
https://www.fontsquirrel.com/tools/webfont-generator    進入之後選擇expert選項，就可以實現各種字體格式之間的轉換了。
https://transfonter.org/      先上傳 ttf 格式的字體，選擇轉換格式，然後點 convert 轉換

使用 Base64 編碼設置字體

騰訊新聞詳情頁的時間，就是使用了 Base64 編碼的自定義字體。好處是可以減少外部文件的數量。

在前面介紹的字體轉換網站中也提供了  Base64 編碼的轉換。Base64 的編碼一大串，看不懂~哈，不過使用方法跟前面類似，如下面所示：

@font-face {
    font-family: 'myFont';
    src: url(data:application/font-woff2;charset=utf-;base64,d09一長串不知所謂的編碼) format('woff'),
    url(data:application/font-woff2;charset=utf-;base64,d09一長串不知所謂的編碼) format('woff2');
}
.box{
    font-family: myFont;  /* 使用字體 */
    font-size: 30px;
}

實際編碼截圖 

不要所有的字體都使用自定義字體

特別是中文，字體文件動則上 M，僅僅建議英文和數字使用好看的自定義字體，因爲它們的體積夠小。記得項目中要使用免費字體哦~！！

常用免費字體：

站酷：https://www.zcool.com.cn/special/zcoolfonts/

漢鼎：http://www.uni-heidelberg.de/impressum.html

日本的：https://www.flopdesign.com/freefont/smartfont.html

          https://www.flopdesign.com/freefont/kanjyukugothic-freefont.html

更多免費字體，可以參考這篇文章：http://www.tuyiyi.com/v/56117.html