現在、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 グリフ、その他の興味深いフォントソースと組み合わせて使用できます。
ぜひお試しください。フィードバックがございましたら、コメントをお寄せください。