本文将探索Web字体的前世今生。

网页中字体有多重要?

web字体的选择和运用是非常重要的,字体设置没到位,设计师跟你拼命。

这是设计稿

这是开发出来的实际效果

这是设计师看到实际效果的表情

你真的了解字体吗?

如果你想认真研究一下字体的话,本文给的所有链接建议都看一遍。看完你对Web字体的运用技巧绝对超过99%的前端。

如何优雅的声明字体?

影响网页中字体的因素有很多,lang,charset,font-family等,先确保页面正确的设置了lang属性(zh-CN)和charset(UTF-8),因为这会直接影响默认字体。

然后主要就是font-family了,字体声明的顺序也是很讲究的,下面是比较合理的声明顺序: css font-family: Helvetica, STXihei, "Microsoft YaHei", Arial, SimSun,sans-serif; 至于为什么,这篇文章写的很详细我就不做搬运工了。

如何优雅的引用特定字体?

line-height,vertical-align,...

如何驾驭字体排版?

如何驾驭WEB字体设计?

前面说的一切都是基础,就算你全部学完,也不见得会针对不同的页面和场景使用不同的字体,因为对于程序员来说,设计排版是UED的事。

但你不一样,你是前端。接下来的内容,就算是专业设计师也不一定知道。

实战应用

总结

编码与渲染

在正式介绍字体之前,我们先来看看浏览器是如何渲染网页中的字体的。

假设你在服务端创建了一个hello.html页面,这个页面里面全都是hello world 文本信息。当用户去访问这个hello.html页面时,服务端返回的是一个个数据包,浏览器需要将这些数据包解析成文本信息,那么第一个问题来了,这个用户可能是中国人,也有可能是美国人或者阿拉伯人,不同国家和地区的语言编码是不同的,浏览器如何将这些内容正确的解析成对应的文本呢?

计算机的数据,本质上都是由01组成的,同样的01排列,通过不同的编码方式,最终会呈现出不同的信息,这就是所谓的编码。我们所熟知的编码方式有ASCII 、GB2312、UTF-8、UTF-16等等,要想将内容正确的解码,首先就得知道它的编码方式。对于浏览器来说,它会按照以下规则去寻找数据的编码类型:

  1. Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset="xxx"。其中charset="xxx"就是编码方式,当浏览器拿到这个信息之后,就能愉快的解码了;
  2. 如果服务端没有指定编码方式,浏览器会去网页文件header中查找charset="xxx"信息,来确定编码方式。
  3. 如果还没找到,那浏览器就只能自行判断编码了,或者让用户设置解码方式。

可以看到,前两步信息都是确定的,只有第三步是无法确定编码方式的。所以为了让你的页面能正常展示出来,一定得要在前两步就设定好charset编码方式,以便于浏览器以你期望的方式解码。现代网页通常都使用utf-8的编码方式,utf-8是unicode字符集的一种实现方式,unicode其实就是一个表,一个将二进制数据映射到各种文字符号的表。由于这个表能够映射出所有字符,所以这也是目前应用最广泛的一个表。

编码的方式确定之后,浏览器就能愉快的将二进制数据包转化为unicode字符了。假设浏览器收到下面这一段二进制信息: 11100101 10001010 10101000 11100110 10000100 10011111 11100101 10110000 10001111 11100101 10001001 10001101 11100111 10101011 10101111

并且浏览器识别出来是utf-8编码,那么根据utf-8字节流到unicode的编码规则: utf-8字节流到unicode的编码规则

可以看到该段字节流全都是1110xxxx 10xxxxxx 10xxxxxx的形式,那么应该是3个utf-8字节对应1个unicode编码,最终可转换成以下结果:

  • 11100101 10001010 10101000 -> 01010010 10101000 ->\u52a8
  • 11100110 10000100 10011111 -> 01100001 00011111 -> \u611f
  • 11100101 10110000 10001111 -> 01011100 00001111 -> \u5c0f
  • 11100101 10001001 10001101 -> 01010010 01001101 -> \u524d
  • 11100111 10101011 10101111 -> 01111010 11101111 -> \u7aef

得到unicode编码之后,我们就可以根据unicode字符表找到对应的文字符号

\u52a8\u611f\u5c0f\u524d\u7aef -> 动感小前端

耶,浏览器终于成功的识别出了这一段懵逼的二进制代码所表示的意思了!

那么紧接着第二个问题:浏览器该如何展示它?浏览器知道这是“动感小前端”,但是该用什么形状显示它并不知道。这就得牵出第二个概念了:字体。

字体也是个表,一个将unicode字符映射成具体形状的表,比如不同字体中眼中的小前端是这样的: 不同字体表现形式

除了字体类型不同之外,字体颜色和字体大小都是一样的,但是显示效果完全不同,所以说字体类型是决定显示效果的关键所在。