问题排查

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

浏览器:

  • Firefox (3.5+)
  • Internet Explorer(Android 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 选项,转到 嵌入 标签并取消选中:禁止 @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;
}