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

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

現(xiàn)在の狀況 (2014 年 6 月)

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

歴史的展望 (2013 年 12 月)

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

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

回避策

前述の修正が望ましいですが、次のような問(wèn)題がありました。癥狀を軽減できる一時(shí)的な回避策はいくつかありますが、問(wèn)題:

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

解決策

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

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

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

追加リソース

• [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 ページの高品質(zhì)テキスト](https://code. google.com/archive/p/webfonts/articles/embedding.html)

以上がGoogle Chrome のフォント スムージングを改善するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。