HTML5与CSS3基础教程-第13章 使用Web字体

《HTML5与CSS3基础教程（第8版）》 第13章读书笔记

• 2020/04/01

• 什么是Web字体： CSS规则@font-face 为Web字体创造了可能，该规则允许CSS链接到服务器上的一种字体供网页使用。（p259）

• Web字体文件格式： （p259 - 260）

  • 内嵌OpenType（.eot）： IE8及之前版本，仅支持.eot格式，是MS的专有格式；
  • TrueType（.ttf）和OpenType（.otf）： 台式机使用的标准字体文件类型，IE9+；
  • Web开放字体格式（.woff）： IE9+；
  • 可缩放矢量图形（.svg）。

• Web字体的文件尺寸管理： （p261）

  web在页面上显示之前，需要下载到用户的机器上，过多的Web字体会增加页面加载的消耗。通常，一个页面中不应使用两个（最多3个）以上的Web字体。

  构造子集是常用的节省Web页面重量的一种方式。通过仅包含确定使用的字符小件实际字体大小的方式，来降低Web字体重量。如：某字体在页面中仅有大写，就可以通过构造子集的方式将小写字母从字体中移除；还可以通过选择特定语言的子集来减小重量。

• Web字体的分类： （p261 - 263）

  1. 自托管： 自托管Web字体来源自你自己的服务器，就像其他资源（CSS、图像等）一样。通常使一次性购买。

     自托管Web字体需要下载后，筛选出需要的字体内容（@font-face部分内容）组成css文件，将其与字体文件放在统计目录，然后使用。

     自托管字体网站（免费）：

     Font Squirrel

     The League of Moveable Type

  2. Web字体服务： Web字体服务通常提供订购Web字体的方法。一般是按月或按年支付版权费用。通常使为用户提供一小段代码放在其网页中，它包含了从远程服务器获取字体文件并将其显示在网站上这一过程的全部代码，可能是CSS，也可能是JS。

     Web字体服务网站（免费）：

     Edge Web Fonts

     Google Fonts

  Web Font Specimen用于测试Web字体在各种环境和字体大小下显示效果的工具。

• 为Web字体应用斜体和粗体（自托管Web字体）： （p269 - p275）

  一般自托管字体内容复制到css文件后，使用的是常规文本，当使用斜体或粗体时，使用的是伪斜体和伪粗体。若字体文件含有斜体或粗体，需要单独导入：

  1. 将斜体字体/粗体字体/斜粗体字体的@font-face部分复制到字体的css文件；

  2. 将font-family 的值设置为与常规字体一致的名称；

  3. 斜体字体将font-style由normal改为italic；

     粗体字体将font-weight有normal改为bold；

     斜粗体将上面两个属性同时更改。

• Web字体服务-以Google Fonts为例： （p275 - 277）

  Web字体服务省去创建和修改@font-face规则的部分。

  Google Fonts在选择了字体和对应子集后，会生成一个<link>标签，将标签复制到html中即可使用对应字体。