缺少跨源資源共享 (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; }