為什麼 Google 字體中的 Roboto Slab 無法在 Chrome 中渲染，如何修復？

排查 Chrome 中的 Google 字體渲染問題

在 Web 開發中使用 Google 字體時遇到渲染困難並不罕見。最近出現的一個具體問題影響了在 Chrome 中使用 Roboto Slab 的網站。雖然該字體在其他瀏覽器中按預期顯示，但在 Chrome 中初始頁面加載時它仍然不可見。

經調查，這似乎是 Chrome 中的已知錯誤。問題的原因是 Chrome 有時在初始頁面載入期間無法正確呈現自訂字體。但是，一旦重新觸發 CSS 屬性（例如，透過將滑鼠懸停在樣式化連結上），字體就會變得可見。

為了解決這個問題，我們開發了一種僅依賴 CSS 的解決方法。透過將以下程式碼新增至樣式表中，您可以確保 Chrome 正確呈現字體：

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 的解決方案，可能不適合所有情況。儘管如此，它提供了解決 Chrome 中 Google Fonts 渲染問題的有效方法。

以上是為什麼 Google 字體中的 Roboto Slab 無法在 Chrome 中渲染，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！