Paul Irish
今回、Chrome DevTools でテキストのレンダリングに使用されている書体を正確に確認できるようになりました。
フォント スタックは、必須というよりは推奨されるものです。提案するファミリーが存在しない可能性があるため、各ユーザーのブラウザにフォールスルー ケースを処理させ、機能するものを取得して使用します。
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
デベロッパーは、実際に使用されているフォントを知りたいとします。仕組みは次のとおりです。
[計算スタイル] に、その要素に使用されている書体の概要が表示されます。注意すべき点がいくつかあります。
- DevTools は、Chrome のテキスト レンダリング レイヤで使用されている実際のフォントを報告しています。
serifまたはsans-serifが実際に解決するフォントについて推測する必要がなくなります。 - ウェブフォントは機能していますか？ウェブフォントが表示されているのか、フォールバック システム フォントが表示されているのか判断しづらい場合があります。これで、ウェブフォントが適用されていることを確認できます。上記の例では、
::first-lineスタイルのウェブフォントとして Lobster を取得しています。 - スタック内のフォールスルー フォントが簡単に見つけられる。上記のコードでは、Merriweather というスペルミスがあったため、Merriweather は使用されず、Lobster にフォールスルーしていました。
- Arial ですか、Helvetica ですか？デザイナーに尋ねるか、DevTools に尋ねましょう。;)
- Google ウェブフォント、Typekit、ローカルフォント、@font-face 書体、Unicode グリフ、その他の興味深いフォントソースと組み合わせて使用できます。
ぜひお試しください。ご意見やご感想がございましたら、コメントをお寄せください。