疑難排解

缺少跨來源資源分享 (CORS) 回應標頭

瀏覽器:

  • Firefox (3.5 以上版本)
  • Internet Explorer (9 以上版本)
  • Chrome (37 以上版本)

總覽

Chrome、Firefox 和較新版本的 Internet Explorer 會強制執行跨來源架構 資源共用標準,因此只會顯示與 適當的「Access-Control-Allow-Origin」回應標頭。Google Fonts 可能會 任何網域使用者都能查看該字型,字型則會看到以下回應 標題:

Access-Control-Allow-Origin:*

可能原因

部分 Proxy 可能會移除回應中的標頭,然後瀏覽器 都不會轉譯字型

診斷中

使用 Chrome 查看 開發人員工具控制台

透過 Firefox,您可以運用 Firebug 或 Live HTTP 標頭擴充功能 查看回應標頭,確認 CORS 回應標頭是否存在。

安裝 NoScript 外掛程式時,Firefox 未顯示網頁字型

瀏覽器: * Firefox (3.5 以上版本)

總覽

安裝 NoScript 外掛程式時,Firefox 不會顯示網路字型。

可能原因

根據預設,NoScript 外掛程式會停用 @font-face 規則。

解決方案

開啟 NoScript 選項,前往「嵌入」分頁,然後取消勾選「禁止出價」 @font-face

網路字型未顯示

瀏覽器: * 全部

總覽

未顯示使用的網路字型。

可能原因

API 網址有誤,或字型不支援樣式 。

解決方案

請確認網址的格式正確,並遵循 字體的字型名稱 (例如 Droid Serif 不是 droid Serif) 就會遵守 30 個主要和樣式,以及載入多個系列的語法 (請參閱 說明文件:入門指南 - 語法。 當字型未顯示時,查看樣式表的內容 問題的詳細資訊將網址複製並貼到您的 瀏覽器,請確保您沒有看到任何錯誤訊息。舉例來說,您可以要求 不支援的重量 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;
}