Google 字型無法在 Chrome 中呈現？快速修復 CSS

Google Chrome 上的 Google Webfonts 渲染問題

您並不孤單！許多人都遇到 Google Fonts 無法在 Google Chrome 上呈現的問題。即使包含了必要的 CSS，這個看似最近的問題仍然會出現。令人沮喪的是，儘管有像 Georgia 這樣的後備字體，但自訂字體最初未能顯示。

Chrome 更新錯誤？

看來這確實是一個已知的 Chrome 錯誤，讓全球的網頁開發者感到沮喪。一種僅 CSS 的解決方法可以提供快速修復，而不是永久性的挫折。

CSS 解決方法

要修正該問題，只需將以下程式碼片段新增至您的樣式表：

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

此解決方法本質上會提示Chrome重新繪製文本，從而解決渲染問題

結論

雖然根本原因可能仍然是個謎，但這種純CSS 解決方案提供了一種簡單而有效的方法來克服Google Fonts 渲染問題谷歌瀏覽器。將這些片段合併到您的樣式表中，您將發現您的自訂字體再次為螢幕增光添彩！

以上是Google 字型無法在 Chrome 中呈現？快速修復 CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！