浏览器使用webfont加载自定义字体

有时候为了美观想要在网页中使用一些特殊的字体

font-family

可以使用css中的font-family属性

它支持cursive、fangsong、sans-serif、serif等属性值。有三点需要注意:

1. 只有在本机中安装了某个字体,font-family属性设置的值才会生效。例如:设置font-family: “华文仿宋”,若本机没有安装该字体,则该字体设置无效,回退到默认字体显示

2. 上述的 cursive、fangsong、sans-serif、serif 等并不是某个字体名称,而是一类字体名称。例如 cursive 表示草书,若你电脑中安装了归类为草书的字体,则使用该字体,否则回退到默认字体。

3. 正是因为以上两个特性,font-family支持同时指定多个字体。例如京东网站的设置:

可以看到它同时指定了特定字体、字体类别。当前一个字体设备不支持时,自动检测下一个字体。其最后设置的是 sans-serif,这是一种无衬线字体类别,一般设备都有该类字体,也算是最后的fallback。

webfont & font-face

有时候我就想用某种字体,而它又不是所有设备都安装的怎么办?那就可以考虑使用webfont,一种让网页自备字体的技术。

font-face可以让网页主动加载某种字体

font-face API: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

<css>
@font-face {
  font-family: "some font";
  /*为了兼容性,可以同时加载多种格式的字体*/
  src: url("https://www.somewhere.com/some-webfont.woff2") format("woff2"),
       url("/somewhere/some-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}

.my-class {
  font-family: "some font", serif;
}
</css>

但这样有两个非常大的问题:

1. 字体文件较大,网络加载缓慢

webfont在欧美发展比较成熟,原因是拉丁字母就那几个,所以一个字体文件也就几kb,几乎不影响网页加载。但汉字有好几万个,这导致一个中文的字体文件普遍在3-10Mb左右,加载很慢

2. font-face有个font-display属性,该属性默认值为auto,一些情况下,这会导致字体先不显示,过一会再以默认字体显示,再过一会才会以设置的字体显示,视觉体验及其割裂。

设置为auto或block时,其渲染过程为:阻塞文字渲染(导致显示空白),等待字体下载完成。在chrome中,若3秒后还没下载完成,则先使用默认字体渲染,字体下载完成后再使用指定字体重新渲染(其他浏览器可能会有不同)

当然,也可以设置成swap,就没有阻塞过程,直接使用默认字体渲染,但也会出现割裂。

font-display API:https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

能不能快一点

有两种办法(本质是一样的):

1. 在字体文件中只抽取页面中使用过的汉字

有个叫 font-spider 的工具,它可以根据网页内容大大精简字体文件,我没用过。

参见:https://www.jianshu.com/p/06346ee07832

2. 使用一些在线服务

例如:https://www.webfont.com/(该网站需注册登录使用)

引入他们的js脚本后,使用它们的api,传入选择器和要使用的字体即可

但我实际用下来体验不是很好,有的时候会抽风,就是一段文字中有些字渲染了,有些还是默认字体,更影响观感。但加载速度还是远远快于加载所有字体的。

它本质上是提取标签中的文字,传到他们服务器,构建一个mini字体返回给浏览器,再进行加载渲染,所以它也会存在先显示默认字体,然后再渲染成指定字体的情况。

追评:用了两天发现字体不渲染了,打开控制台看到了这个。。。

可是它网站明明说是免费使用啊,也没说有频控。

一番努力之后找到了这个:

且其价格也不便宜,最便宜的一个月得40

ummmm,看能不能想办法自建一个在线字库。

:不建议使用www.webfont.com的服务,很坑,又不稳定,而且刚用两天就提示我没使用额度了。今天闲来无事,自己开发了一个这样的服务,用法和他一样简单,详见:一个webfont精简服务

在哪可以找到字体

英文字体比较多,以下为支持中文字体的:

阿里云的字体库(字体极少,支持标签导入或下载字体库文件):https://www.iconfont.cn/fonts/index

google字体(字体丰富,下载字体文件使用,需科学上网):https://fonts.google.com/

上面说的那个,仅支持脚本引入(虽然易用,但强烈不推荐):https://www.webfont.com/

字体文件格式

woff:这是一种为了web而诞生的文字格式,几乎所有浏览器都支持

woff2:提升了30%左右的压缩率,但支持情况不佳

ttf:即 TrueType Font,最常见的字体格式,几乎所有浏览器都支持。windows安装的字体就是这种格式,可以在 C:\Windows\Fonts 目录下查看到。mac应该也是,因为这个字体类似是微软和苹果一起开发的

Leave a Comment