Google FontsがChromeでレンダリングされない? CSS の簡単な修正

Google Chrome での Google ウェブフォントのレンダリングの問題

あなたは一人ではありません。 Google Chrome で Google Fonts がレンダリングされないという問題を多くの人が経験しています。この問題は最近発生したように見えますが、必要な CSS が含まれている場合でも発生します。もどかしいことに、Georgia のようなフォールバック フォントがあるにもかかわらず、カスタム フォントが最初に表示されません。

Chrome アップデートのバグ?

これは確かに Chrome の既知のバグのようです。世界中の Web 開発者をイライラさせています。永続的な問題ではなく、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 で。これらのスニペットをスタイルシートに組み込むと、カスタム フォントが再び画面に表示されるようになります。

以上がGoogle FontsがChromeでレンダリングされない? CSS の簡単な修正の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。