Google FontsのRoboto SlabがChromeでレンダリングに失敗するのはなぜですか?どうすれば修正できますか?

Chrome での Google Fonts レンダリングの問題のトラブルシューティング

Web 開発で Google Fonts を使用するときに、レンダリングの問題が発生することは珍しいことではありません。最近発生した特定の問題は、Chrome で Roboto Slab を使用する Web サイトに影響を与えます。他のブラウザではフォントが期待どおりに表示されますが、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 FontsのRoboto SlabがChromeでレンダリングに失敗するのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。