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 Web Fonts、Typekit、ローカル フォント、@font-face 書体、Unicode グリフ、その他のあらゆるフォントソースとスムーズに連携します。
楽しんでいただけましたら、ぜひコメントをお願いします。