网络字体

Docs

网页字体

浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如，大多数现代浏览器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 开放字体格式版本 1 和 2)，它是最有效的格式，但是旧版本 IE 只支持 EOT (Embedded Open Type，嵌入式开放类型) 的字体，你可能需要包括一个 SVG 版本的字体支持旧版本的 iPhone 和 Android 浏览器。我们将向您展示如何生成所需的代码。
字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中 (或者在您的站点上) 提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。
font-family 属性指定的是一个优先级从高到低的可选字体列表。字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。
@font-face 指定一个用于显示文本的自定义字体；
- 字体能从远程服务器或者用户本地安装的字体加载。
- 如果提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源。
- 在同时使用 url() 和 local() 功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。
- @font-face 规则不仅仅使用在 CSS 的顶层，还可以用在任何 CSS 条件组规则中。
- 通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络 - 安全"字体所限制 (字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。
- WOFF（Web Open Font Format，网页开放字体格式）是由 Mozilla 与 Type Supply、LettError 及其他组织协同开发的一种新的网页字体格式。它使用了与 TrueType、OpenType、Open Font 所采用的 sfnt 结构类似的压缩算法，不过还添加了元数据（metadata）及用户私有数据结构，其中包括了自定义空间，允许厂家和经销商在需要时提供许可证。
  WOFF 有以下三点优势：
  - 字体采用压缩格式，相对于使用不压缩的 TrueType, OpenType 的网站，将占用更少的带宽，获得更快的加载速度。
  - 许多字体经销商并不愿意将 TrueType 或 OpenType 的许可证颁发给网站，他们更愿意颁发 WOFF 的许可证。这对于网站开发者来说将是一个福音。
  - 无论是收费还是免费的浏览器厂家都喜欢 WOFF 格式，因此它很可能成为未来的主流与跨平台字体格式。
  WOFF 有两个版本：WOFF 和 WOFF2。它们之间最大的差别体现在使用的压缩算法上。在 @font-face 属性中，它们使用 woff 和 woff2 这两个标识符来区分。
- web-fonts 的兼容性
  - 我们刚才使用的字体文件是 .ttf, 它是 TrueType 字体。
  - 在开发中某些浏览器可能不支持该字体，所以为了浏览器的兼容性问题，我们需要有对应其他格式的字体;
    - TrueType 字体：拓展名是 .ttf。
    - OpenType/TrueType 字体：拓展名是 .ttf、.otf，建立在 TrueType 字体之上。
    - Embedded OpenType 字体：拓展名是 .eot，OpenType 字体的压缩版。
    - SVG 字体：拓展名是 .svg、 .svgz。
    - WOFF 表示 Web Open Font Format web 开放字体：拓展名是 .woff，建立在 TrueType 字体之上。
  - 这里我们提供一个网站来生产对应的字体文件：
    - 在线字体编辑器-JSON 在线编辑器 (qqe2.com)
    - Create Your Own @font-face Kits » Font Squirrel
- 在线字体服务
  - Cloud & Self Hosted | Fonts by Hoefler&Co. (typography.com)
  - Adobe Fonts | 浏览不限数量的字体
  - Browse Fonts - Google Fonts
    @import url("https://fonts.googleapis.com/css2?family=Itim&display=swap"); h2 { font-family: "Itim", cursive; }
- web fonts 兼容性写法
  - bulletproof @font-face syntax（刀枪不入的 @font-face 语法）
  - 这是 Paul Irish 早期的一篇文章提及后 @font-face 开始流行起来 (Bulletproof @font-face syntax - Paul Irish)。
  - font-family：这一行指定了您想要引用的字体的名称。
  - src 用于指定字体资源
    - url 指定资源的路径
    - format 每种字体文件的格式，不是必要的。但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。
      - 因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个。
      - 因此，最好是把新的、更好的格式比如 WOFF2 放在前面，把偏老的，不是那么好的格式像 TTF 这样的放在后面。
      - 唯一的例外是 EOT 字体——他们首先在旧版本的 IE 中修复了几个 bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。
    - font-weight/font-style: 这些行指定字体的粗细，以及它是否斜体。如果您正在导入相同字体的多个粗细，您可以指定它们的粗细/样式，然后使用不同的font-weight/font-style来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson 写的 @font-face tip: define font-weight and font-style to keep your CSS simple 更详细地说明了该做些什么。

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* 正常粗细的字采用字体 Times New Roman */
@font-face {
  font-family: myFirstFont;
  src: local("Times New Roman");
  font-weight: normal;
}

/* 粗体字采用 Consolas */
@font-face {
  font-family: myFirstFont;
  src: local(Consolas);
  font-weight: bold;
}

Loading Github Gist ...

Details

See the Pen by jaimezeng (@jaimezeng) on CodePen.

web-font