经常看到一些网站用了一些自定义的字体,看着很Cool😎,但是,如何自定义字体呢?

放置.ttf格式字体

.ttf格式的字体比较适合做webfont,可以放在网站根目录下的资源文件夹,比如: /web_root/fonts/font_name.ttf

加载字体

在网站的CSS文件中加载自定义字体,格式为:

@font-face {
    font-family: "font_name.ttf";
    src: url("/web_root/fonts/font_name.ttf") format("truetype");
}

也可以引用网络上提供的webfont到网站,同样的道理,只是把url修改为网络上的地址即可:

@font-face {
    font-family: "font_name.ttf";
    src: url("https://[web_address]/font_name.ttf") format("truetype");
}

应用字体样式

在网站中具体需要应用的样式里用font-family来设定上一步引用的字体,如:

.article-title {
    font-family: font_name.ttf, Arial;
}

可在font-family自定义的中文字体后面加上一些常见的英文字体,让字体的显示效果更加友好。

设置完成后,可能有些浏览器的缓存让新设置的CSS样式不生效,需要清除缓存再刷新网页。另外,有些中文字体的文件体积比较大,可能设置为自定义字体后网站的加载很缓慢,也是在选择字体的时候一个需要注意的问题。

Enjoy! 😊