Google Chrome のフォント スムージングを改善するにはどうすればよいですか?

Google Chrome のフォント スムージング: 総合ガイド

Google Chrome でのフォント レンダリングの品質は、ユーザーの間で議論と不満のトピックとなってきました。しばらくの間Web開発者。 Google ウェブフォントは通常、大きなフォント サイズではくっきりと鮮明に表示されますが、特に Chrome では、小さなサイズではレンダリングが低下することがよくあります。

現在の状況 (2014 年 6 月)

Google 2014 年 7 月にリリースされた Chrome 37 では、フォントのレンダリングを大幅に改善する修正が導入されました。開発者は、Google ウェブフォントがすべてのフォント サイズでより一貫して表示されることを期待できるようになりました。

歴史的展望 (2013 年 12 月)

Chrome 37 より前には、Chrome 37 より前の 2 つの主なアプローチがありました。フォントのスムージングのアドレス指定問題:

1. Web フォントの読み込み順序: フォント ファイルを特定の順序で読み込むことで、CSS または Google の webfont.js スクリプト経由で読み込まれたフォントのレンダリング品質を向上させることができました。 。ただし、このソリューションはすべてのブラウザで信頼できるわけではありません。
2. セルフホスト フォント: フォントをローカルでホストし、@font-face で読み込むことで、開発者はフォントのレンダリング プロセスをより詳細に制御できるようになります。 TTF/OTF フォントを埋め込むことで、Chrome による WOFF ファイルの問題処理を回避できる可能性があります。

回避策

前述の修正が望ましいですが、次のような問題がありました。症状を軽減できる一時的な回避策はいくつかありますが、問題:

• テキスト ストロークの追加: -webkit-text-ストロークをフォントに適用すると、わずかなアウトラインを追加してレンダリングを改善できます。
• テキストシャドウの使用: 微妙なテキストシャドウでもフォントを強調できます
• RGBA の使用: テキストのシャドウまたはストロークに RGBA 構文を使用すると、フォント レンダリングをより柔軟に微調整できます。

解決策

Google Chrome のフォント スムージングの問題に対する推奨される解決策次の順序でフォントをロードします:

1. TTF/OTF フォント
2. WOFF フォント
3. SVG フォント
4. EOT フォント

この順序では、ネイティブにサポートされているフォントが優先されます。

追加リソース

• [Google Chrome で醜いフォント レンダリングを修正する方法](https:/ /www.matope.net/html5-css3/font-rendering-chrome-fix/)
• [Web フォント] Chrome でのレンダリング](https://www.w3.org/Graphics/SVG/WG/wiki/Web_Font_Rendering_in_Chrome)
• [フォントの埋め込み: Web ページの高品質テキスト](https://code. google.com/archive/p/webfonts/articles/embedding.html)

以上がGoogle Chrome のフォント スムージングを改善するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。