问题排查

缺少跨域资源共享 (CORS) 响应标头

浏览器:

  • Firefox(3.5 及更高版本)
  • Internet Explorer (9+)
  • Chrome(37 及更高版本)

概览

Chrome、Firefox 和更新版本的 Internet Explorer 都会强制执行跨域资源共享标准,因此只会呈现带有相应“Access-Control-Allow-Origin”响应标头提供的网络字体。由于 Google Fonts 可在任何网域上查看,因此系统将使用以下响应标头提供字体:

Access-Control-Allow-Origin:*

潜在原因

某些代理可能会从响应中去除标头,之后浏览器不会呈现字体。

正在诊断

使用 Chrome 时,请查看 DevTools 控制台中的相关警告消息。

使用 Firefox 时,用户可以使用 Firebug 或 Live HTTP Headers 扩展程序查看响应标头,以确认存在 CORS 响应标头。

安装 NoScript 插件后,Firefox 中不会显示网页字体

浏览器: * Firefox(3.5 及更高版本)

概览

安装 NoScript 插件后,Firefox 不会显示网页字体。

潜在原因

默认情况下,NoScript 插件会停用 @font-face 规则。

解决方案

打开 NoScript 选项,转到“嵌入”标签页,然后取消选中:Forbid @font-face

网页字体未显示

浏览器: * 全部

概览

使用的网络字体未显示。

潜在原因

API 网址有误,或已请求字体不支持的样式。

解决方案

请确保网址格式正确,大小写遵守字体名称(例如,Droid Serif 不是 droid Serif),遵循权重和样式的语法以及加载多个系列的语法(请参阅文档:使用入门 - 语法)。 当字体未显示时,查看样式表的内容可提供有关错误情况的更多信息。将该网址复制并粘贴到浏览器中,并确保您不会看到任何错误消息。例如,请求 Droid Serif 不支持的权重将显示以下错误消息:

/* Droid Serif (style: normal, weight: 300) is not available */
/* However, style: normal, weight: normal is available */
/* However, style: italic, weight: normal is available */
/* However, style: normal, weight: bold is available */
/* However, style: italic, weight: bold is available */
/* Not supported. */

网页标题中的字体较粗

浏览器: * 全部

概览

在标题 (h1、h2 等) 中使用时,字体很粗,但字体为正常 (400) 粗细。

潜在原因

浏览器会自动加粗文本。

解决方案

确保在标头中应用字体时,在 CSS 规则中指定正确的字体粗细:

h1 {
 font-family: Lobster, cursive;
 font-weight: 400;
}