上一章说到了我们选用字体的尴尬,毕竟只指定一个名称,局限性太大了。那我们能不能为用户提供字体呢?我们的网页用我们自己提供的字体来显示,想想又觉得世界很美好了。

这个事情还真的能够做到,而且难度也不大。这就是引入外部字体,我们来写一下看看吧:

@font-face {
  font-family: "小老鼠长得帅帅哒";
  src: url("font/LaPointesRoad.ttf");
}
p {
  font-family: "小老鼠长得帅帅哒";
}

先来看一看效果:

Hello World!

这个效果真美好啊~

我们首先使用 @font-face 去定义了一个字体。在这里面 font-family 是说我们所定义的字体名称,这个名称和字体本身的名称是没有关系的,你可以随便去写,当然也要符合我们的规则,如果有空格、特殊符号、中文记得用引号引起来。

src 属性说的是这个字体的路径。url() 表示这是一个网址,反正你按着这个结构去写,然后在引号里面去写上字体的地址就对了,我们这里用的又是相对地址。当然,你要保证在这个地址下确实有这个字体文件。否则找不到字体文件还是会显示成为默认字体。

@font-face 还可以被指定 font-weightfont-style 等属性,用来进一步描述这个字体文件,如果有需要,大家可以查阅相关文档,在这里就不深入讲解了。

到目前为止,这个方法会让你觉得一切都很美好。那么回到上一章我问的问题:为什么使用特殊字体的网页那么少呢?

字体文件是有体积的,所以引入它会导致我们的网页加载变慢。你也许会说,这个说法也适用于图片,那为什么我们并不介意在网页中插入图片呢?一般来说,字体文件比图片的体积还是要大吧。

当然更严重的问题是,我们想一下,如果是英文字体,那么它只要包含 26 个小写字母,26 个大写字母,以及十个数字,再加上几十个常用的标点符号,就差不多可以应付几乎所有日常情况了。这才多少内容,也就一百个字符吧。所以英文字体的体积,倒还真的不是特别大,除非你要把所有的字重全部引入,才可能感到头疼。如果你经常逛国外的网站,还是会发现很多用特殊字体的个性站点。

但是到了中文就比较麻烦,3500 常用字,这些就够吗?其实我们每天都在遇到这些常用字以外的文字。想比较好的涵盖日常内容,起码也得 6500 字吧。这时候已经不需要说别的了,中英文字体体积的差别是很大的。中文字体动辄几兆,十几兆,甚至几十兆。就算现在网速比较快,一秒钟能下载一兆,为这个字体都要等待十来秒,用户表示毫无使用体验。而且用户下载这些字体,是要走你服务器流量的,流量啊,那是真金白银的钱啊,你能接受,你的老板也不会干的。

所以虽然有方法,但是目前真的很难实用。对于中文,如果希望使用特殊字体,最常见也是最简单的办法就是使用图片。但是这样对搜索引擎不友好,因为机器并不知道你图片上写的是什么内容(虽然现在有些搜索引擎,会去努力的识别图片上的文字,但这依旧不如纯文字更加友好)。不过如果是很少的内容,这个方法的效果已经可以让人满意,并且毕竟它有很好的便捷性。

还有一种方法,中文字体那么大,是为了包含尽可能多的文字,来覆盖我页面中的内容。这样做就很被动,不如我们把思路反过来,我的页面中有哪些文字,就让这个字体包含哪些内容,多余的就不需要了。因为我们在一个页面中所使用到的文字毕竟非常有限,这样为页面特别定制出来的字体就会相对的小上好多。

原来方法是有的,虽然说不上尽善尽美,但是可以解决问题。不过想想真的好麻烦,所以没有特别的必要,大家还是会选择使用最基本的字体。

【本章助记卡片:卡片 for 第三十六章