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 编码的自定义字体。好处是可以减少外部文件的数量

CSS3干货12:CSS3 使用非系统字体_第1张图片

在前面介绍的字体转换网站中也提供了  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;
}

实际编码截图 

CSS3干货12:CSS3 使用非系统字体_第2张图片

不要所有的字体都使用自定义字体

特别是中文,字体文件动则上 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

你可能感兴趣的:(HTML5_CSS3)