Web前端开发技术

Appearance

字体 ​

元信息 ​

  • 目标：掌握 font-family 的多值回退机制与字体族兜底策略，理解"渲染发生在客户机"带来的安全字体问题，会用 @font-face 引入 web font 及字体子集
  • 关键概念：字体族、font-family、安全字体、@font-face、字体子集、unicode-range
  • 关联阶段：cp1
  • 常见误区：以为指定了字体名客户机就一定能显示（渲染用的是浏览者电脑上的字体库）；以为中文字体可以整库附带进网页（体积高达数兆，须子集化或在线服务）

什么是字体? ​

字体是文本用户界面的核心,系统使用预置的字体库对字符文本进行渲染，决定了文本元素的基本形状。

字体体验 ​

打开win10的字体试衣间，位于开始 > Windows 设置 > 个性化 > 字体。

  • 点击对应的字体后，可输入文字，预览字体效果
  • 通过搜索框，可直接查找对应的字体。
  • 点击“在Microsoft Store中获取更多字体”可直接从应用商店中下载字体。

如需使用该功能，请确保您的Windows 10 已经升级至1803版本

font-family 示例 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
  • font-family属性的作用是指定字体库,支持多项值
  • 首先查找和装载 "微软雅黑" 这个具体的字库，并在该字库中寻找'头条'这两个字符
  • 如果在上一步中失败,则尝试下一个属性值,即"Times New Roman"和后续
  • 如果最终仍然失败, 那么就会用一个缺字符代替（通常是小方框）。

字体族 ​

不是指具体的某一个字体(如微软雅黑),而是指符合某种特性的多种字体的集合

常见的字体族有 serif（衬线字体）、sans-serif（非衬线字体）

定义font-family属性时,一般顺序为具体=>宽泛,最后一个选项指定为字体族，以保证不同操作系统下的字符都能够正确显示

字体族只能保证字符文本被正确显示,但并不是完美的显示

安全字体 ​

设计者必须意识到，Web页面是在客户机上的浏览器上渲染,需要客户机上的字体库支持

  • 不同的操作系统默认安装的字体库是不一样的,譬如微软雅黑字体是windows专有
  • 涉及商业版权等原因,客户机上没有安装指定的字体
  • 你为中文指定了英文字体，但英文字体库中并不包含中文字符的图形

在 Windows,Mac,linux 等各类操作系统上均可使用的字体资源，称之安全字体,详见

设计师的电脑一般安装有photoshop等专业设计软件,而这些软件通常会安装许多华丽的字体,而未来浏览者的电脑则很可能一穷二白,什么字体也没安装.

字体库文件 ​

  • 每一种字体,实际上都关联着系统中某一个字体库文件
  • 每个字体库文件由一组矢量图形组成,包含了每一个字符的图形,譬如中文字体,一般包含了数千个常用汉字及符号
  • 对于操作系统中已安装的字体,不需要设计师明确指定字体文件的引用路径，浏览器会自动查找并装载

如果为了追求特殊的显示效果,譬如站点Logo或标题之类,而客户机上又没有指定的字体库文件,怎么办?

各操作系统上默认安装可用的字体库本来就有限，而且各操作系统上共有的字体库就更少了

传统解决方案 ​

将需要特殊字体的文本制作成图片或flash后嵌入页面,但存在如下缺陷

  • 图片和文本的样式控制方式不一样,需要额外代码
  • 图片不支持文本的一些特征,如平滑缩放,灵活设置颜色,透明背景等
  • 图片只能一站一用,不能像字体库一样进行重用和共享

现代解决方案: @font-face ​

在新近的css3规范中，提供了 @font-face 属性，以试图彻底解决上述问题。

  • 将字体当作一种资源附件，就如同<img src='x.png'>一样，开发人员只需要将自定义或自制的字体文件预放置在页面源代码的目录下
  • 当渲染时,浏览器会解析 @font-face的各项属性, 并将Web服务器源代码目录下的自制字体库文件下载到客户端，然后使用该字体显示指定的字符

甚至，通过这种方式，可以图标等资源制作成字体文件格式，从而达到更多有趣又易用的效果,详见后续章节

字体资源文件示例 ​

演示地址

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

webfont.eot,webfont.woff2,webfont.woff,webfont.ttf,webfont.svg是同一种字体库的不同版本,分别适应于不同的浏览器的需要,详见代码中的注释.如果你不考虑兼容某类浏览器,可将相应的字体库文件删除掉,以减小相关尺寸

上例中,确保各字体文件与网页文档放置在相同目录下.如果希望放置在其它目录下,请注意修改代码中url属性的路径

在线字体与字体子集 ​

字体库文件可能十分庞大,譬如中文字体库,高达数十M甚至更多. 若再考虑浏览兼容性,需要制作不同版本的字体库,则实际的字体库文件尺寸更大,因此在源代码中附带完整的字体库文件的做法是不可行的

  • 通过字体制作工具,仅将需要显示的字符抽取出来,形成字符子集库
  • 将字体库作为一项Web服务,类似于加载图床上的图片，通过使用不同的url参数即API,动态访问和获取所需字符的字体文件 详见
  • 综合上述两种方式,先在Web服务端制作好字符子集,再通过Web服务的方式进行访问

注意: 使用在线字体,须注意网络是否通畅.可查看浏览器的开发者工具栏中的console面板,检查是否存在网络访问错误.

譬如访问国外网站时，偶尔会发生加载十分缓慢的情况，其中可能的原因之一就是该网站使用了来自 fonts.googleapis.com的字体库。解决方案：https://blog.csdn.net/deng_xj/article/details/88544617

在线字体示例 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

以上字体来源及在线制作工具:https://www.iconfont.cn ,需要先在该网站使用指定的字符集定制好字体库,然后通云服务的方式访问,也可以将定制的字体库下载至本地,附于源代码之中.

其它解决方案 ​

中文字体的体积一般比较大（2~5Mb），如果要用于网页正文渲染，可以考虑将字体文件分拆多份后，然后每一份通过css的 unicode-range 指定生效字符范围。

此方式可以借助浏览器并行下载的能力，从而快速完成字体下载。

语法参考 ​

深入阅读 ​

字体库 ​

字体下载 ​

中文字体 ​

字体库工具 ​