技术考虑

本文档将介绍一些使用 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 一样运行。