Web 字体

Web 安全字体

默认情形下,浏览器是以系统中已经安装的字体来进行渲染的。

css 的 font-family 命令,指定了网页元素所使用的字体。下面是一个例子:

font-family: Georgia, "Times New Roman",
             "Microsoft YaHei", "微软雅黑",
             STXihei, "华文细黑",
             serif;

它的规则有三条:

  1. 优先使用排在前面的字体。
  2. 如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。
  3. 如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。

但是世界上有那么多的系统,那么多版本,预装的字体也大不相同,如果让操作系统自行决定,可能结果不是很好看。所以,人们对主流个人计算机操作系统中的系统字体做了统计,选出最小公分母,也就是大家都有的字体,称之为 Web 安全字体。

要了解 Web 安全字体,可以参阅 CSS Web Safe Font Combinations

下面举一个例子:

font-family: Arial, Helvetica, sans-serif;

我们选择 Arial 作为首选字体(注:Arial 字体是最常用的 sans serif 字体,也是 Windows 的默认字体,当字体很小是不容易阅读),但是,苹果系统中没有这个字体,所以我们选择 Helvetica(和 Arial 很相似)作为第二备选字体,最后我们选择 sans-serif 作为第三备选字体,如果在一个既没有 Arial 也没有 Helvetica 的系统里,那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样,我们很大程度上保证了使用不同操作系统的访问者都能看到相同(至少是类似)的页面文字。

除了 Arial,常见的安全字体还有:

  • Verdana 字体,它是微软公司的核心字体之一,专门为屏幕显示而开发的。它的应用广泛,宽度大而易于阅读,是显示器中最清晰的字体。CSS 写法:font-family: Verdana, Geneva, sans-serif;
  • Times New Roman 字体,它是最常用的 serif 字体,是浏览器默认的字体。小号字的易读性也很差。CSS 写法:font-family: 'Times New Roman', Times, serif;

以上说的这些其实是西文字体,对于中文字体,当然涉及到各类系统中中文字体的安装情况的一个统计,博主会另写一篇。

安全字体显然是不够用的,所以也出现了一些通过图像,Adobe Flash或其他基于非文本的技术的解决办法。这里不做展开,但是这种方式的缺点很明显,就是它不是文本,不可以选择、这样就不能很好地被识别,翻译,供残疾人使用的设备访问。所以这种技术越来越被淘汰了。

@font-face

他是 CSS3 的一项新特性,也不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但在 CSS2.1 中又被删除,现在正式列入 CSS3。目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题。

@font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制。只需将字体包安装在服务器上,当用户加载网页时,字体包会自动下载到用户机器上,保证字体能够正确渲染。

随着 @font-face 的不断流行,产生了许多新的字体格式图标集,称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。

网络字体的优点有很多:

  • 使用的是真正的文本,而不是图片,放大和缩小都不会影响渲染效果,用户体验好;
  • 可以被搜索引擎辨认;
  • 不像图片每次需要重新生成,添加删除更方便。

这里先讲原理,首先,使用@font-face声明一个字体集,使用font-family描述符为它提供一个名称,然后使用src指向包含字体本身的文件:

@font-face {
  font-family: 'Awesome Font';
  src: url('awesome-font.ttf');
}

这里,通过链接到一个名为 wesome-font.ttf 的字体文件,定义了一个名为Awesome Font 的字体集。

然后,在您的CSS中,使用 font-family 属性将该字体应用到一个 HTML 元素:

h1 {
  font-family: 'Awesome Font';
}

但是,Web 字体具有许多不同的格式,并且各种 Web 浏览器支持这些格式的不同子集。

也就是说,为了支持所有的主流 Web 浏览器,一个 @font-face CSS 声明实际上无法像前面提到的那样那么简单:

@font-face {
  font-family: 'Awesome Font';
  src: url('awesome-font.ttf');
}

它应该是这样的:

@font-face {
  font-family: 'Awesome Font';
  src: url('awesome-font.eot'); /* IE9 Compat Modes */
  src: url('awesome-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('awesome-font.woff') format('woff'), /* Modern Browsers */
       url('awesome-font.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}

总结起来要点就是:

  • 将 WOFF 2.0 变体提供给支持它的浏览器
  • 将 WOFF 变体提供给大多数浏览器
  • 将 TTF 变体提供给旧 Android(4.4 版以下)浏览器
  • 将 EOT 变体提供给旧 IE(IE9 之下)浏览器

从技术上讲,还有 SVG 字体容器,但 IE 和 Firefox 从不支持它,并且现在 Chrome 也不再支持它。因此,其用途就很有限。

看到这里,感觉脑袋都要炸了。Google Fonts 提供了便利。Google Fonts 会根据浏览器的类型,来加载不同的 CSS 以加载不同格式的字体。

如何使用 Google Fonts

  1. 标准方法
     link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Condiment'>
    
  2. @import 方式
     @import url(http://fonts.googleapis.com/css?family=Condiment);
    
  3. JavaScript 方式(代码省略)

国内环境使用 Google Fonts

有知乎大神,通过 Best Trace 追踪路由器,发现 Google 字体库的国内服务器在北京和上海,另外通过站长工具 ping 测试http://fonts.googleapis.com,速度是杠杆的。参考地址

博主在本地也测试了引用 google fonts 的某个字体,速度是 74ms。所以看起来本阶段可以直接用 Google Fonts 了。之前的观念可以改改了。。

如果速度依然有问题,可以参考参考文档的最后一条,结合前面的原理,应该是很好理解的。

字体图标原理

@font-face引入一个字体集,这个字体集对应着字符的显示信息,那么浏览器读取到 A 的时候,就会使用 A 对应的 Unicode 编码去查找字体集中对应的显示描述信息。

字体图标只是让某些 unicode 码(可以自己创建)对应我们自定义的字体库,而我们的字体库文件中有关于该 unicode 码的显示描述信息而已。

font-family: 'Glyphicons Halflings';
content: "\e131";
padding-right: 8px;
color: #b1b1b1;
float: left;

这里 unicode 码就是 \e131。查看网站的加载信息,可以发现我们引用了 Glyphicons Halflings 字体。他的格式和字体的格式也是相同的。

参考文档

Web版式和@font-face简介
使用 Google Fonts 为网页添加美观字体
Google Fonts Technical Considerations
如何优雅的使用Google Fonts API

2 comments

  1. Pisces Post author

    测试

    1. Pisces Post author

      收到

发表评论

电子邮件地址不会被公开。 必填项已用*标注