疑難排解

缺少跨源資源共享 (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 Headers 擴充功能查看回應標頭,確認 CORS 回應標頭是否存在。

安裝 NoScript 外掛程式後,Web Fonts 無法顯示在 Firefox 上

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

總覽

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

可能原因

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

解決辦法

開啟 NoScript 選項,前往「Embeddings」(嵌入) 分頁並取消勾選:Forbid @font-face

網頁字型無法顯示

瀏覽器: * 全部

總覽

您使用的網頁字型並未顯示。

可能原因

API 網址發生錯誤,或是要求字型不支援該樣式。

解決辦法

請確定網址的格式正確,且字型會採用字型名稱 (例如 Droid Serif 非 droid Serp) 等屬性,系統就會依循權重和樣式的語法,以及載入多個系列的語法 (請參閱說明文件:入門指南 - 語法)。 字型如果無法顯示,請查看樣式表的內容,即可進一步瞭解問題所在。請複製網址並貼到瀏覽器中,並確認沒有任何錯誤訊息。舉例來說,如果要求 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. */

在網頁標題中使用網路字型時比較加厚

瀏覽器: * 全部

總覽

即便字型是正常 (400) 權重,字型在採用標題 (h1、h2 等) 時會比較粗。

可能原因

瀏覽器將文字自動設為粗體。

解決辦法

將標題套用至標題時,請確保 CSS 規則指定了正確的字型粗細:

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