首頁 > web前端 > css教學 > Google 字型無法在 Chrome 中呈現?快速修復 CSS

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

Patricia Arquette
發布: 2024-12-10 07:45:13
原創
188 人瀏覽過

Google Fonts Not Rendering in Chrome? A Quick CSS Fix

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板