技术考虑

本文档提供了一些相关的技术信息, 使用 Google Fonts API 请求网页字体时的场景。

本文档还提供了关于浏览器特定行为的信息。

如果您只想使用 Fonts API,则无需阅读本页内容。 不过,阅读本页内容可能有助于提高网页加载性能。

什么是 Google Fonts API?

当浏览器发送 Fonts API 样式表请求(如 <link> 标记),Fonts API 会提供 发出请求的具体用户代理

例如,来自 Firefox 的 Inconsolata 请求会返回以下 CSS:

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}

而来自 Internet Explorer 的请求则会返回:

@font-face {
  font-family: 'Inconsolata';
  src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}

下载 CSS 之后,浏览器会使用合适的 广告格式

特定浏览器的行为

本部分介绍了每种浏览器对网络字体的默认行为。请注意, 您可以使用 网页字体加载器

有关支持的浏览器的列表,请参阅 常见问题解答

Google Chrome

Chrome 会呈现网页的其余部分,但在字体加载完毕之前,它便会显示 空白区域来代替使用该字体的文本。

Mozilla Firefox

Firefox 先以默认字体显示文字, 对字体进行设置此行为称为“未设置样式, 文本。”

Apple Safari

Safari 会呈现网页的其余部分,但在字体加载完毕之前,它会显示 空白区域来代替使用该字体的文本。

Microsoft Internet Explorer

Internet Explorer 会呈现网页的其余内容,但在字体加载完成之前, 它会显示空白区域来代替使用该字体的文本。

从更笼统的角度来说,Internet Explorer 的行为可能会因展示位置而异 以及各种元素的存在。如果您希望提供一致的行为 请使用网页字体加载器。对于 例如,您可以选择 确保所有浏览器的行为方式都与 Firefox 一致