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