Paul Irish
Chrome DevTools で、テキストのレンダリングに使用されている書体を正確に表示できるようになりました。
フォント スタックは面白いことであり、需要というよりも提案という意味です。提案されたファミリーは存在しない可能性があるため、各ユーザーのブラウザで代替のケースを処理し、機能するものを取得して使用します。
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
デベロッパーとして、実際に使用されているフォントを把握したいとお考えの場合は、仕組みは次のとおりです。
[Computed Styles] の下に、その要素に使用されている書体の概要が表示されます。次の点に注意してください。
- DevTools には、Chrome のテキスト レンダリング レイヤで使用される実際の書体が報告されます。
serifまたはsans-serifのどのフォントが実際に解決されるかを推測する必要がなくなります。 - 使用するウェブフォントは機能していますか？ウェブフォントと代替システム フォントのどちらが表示されているかの判断が難しい場合があります。これで、ウェブフォントが適用されていることを確認できます。上記の例では、
::first-lineスタイルのウェブフォントとして Lobster をプルダウンしています。 - スタック内のフォールスルー フォントは見つけやすい。上の例では、「Merriweather」というスペルミスがあったため使用されず、Lobster となっています。
- Arial ですか、それとも Helvetica ですか？デザイナーまたは DevTools に質問します。;)
- Google Webfonts、Typekit、ローカル フォント、@font-face 書体、Unicode グリフなど、さまざまなフォントソースに対応しています。
ぜひこの機能をご活用ください。フィードバックがございましたら、コメントをお寄せください。