web-dev-qa-db-ja.com

どのフォントChromeが使用されているかを確認するにはどうすればよいですか?

次のCSSがあると想像してください

font-family: 'Non-existant Sans', Arial, sans-serif;

「存在しないSans」がシステムにインストールされていないと仮定すると、Arialはブラウザによって使用されます。 Chromeを使用して、どのフォントがレンダリングされているかを調べる方法はありますか?

Edit:Dave(質問へのコメント)は同様の質問を指摘しています。特にここでChrome=について質問しています。他の質問の回答の多くは拡張機能を示していますが、開発ツールのみを使用してこの情報を判断するネイティブな方法はありますか?

2013年9月編集:Chromeチームは、フォントファミリの検査が Chrome Canary の最新ビルド)(Twitterリンクには詳細な画像が含まれています。)これは、今後数週間にわたってdev> beta> stableを通じて徐々に減少します。

66
Liam Newmarch

GoogleでChrome [要素]タブの[計算済み]の下のdevtools:

Magic paper roses hello kitty

86
Jürgen Paul

私はパーティーに少し遅れましたが、ブラウザが使用しているフォントをデバッグする非常に簡単な方法を発見しました。

Chrome Web Inspectorで、Elements PanelのCSSペインのフォントスタックに移動します。次に、スタックの一番上から、フォントの名前を変更します(ランダムな文字を追加します)問題のテキストに注意しながら、使用中のテキストを変更すると、スタック内の次のテキストにフォールバックするときにテキスト変更フォントが表示されます。

ほとんどの開発ツールで同様のことが可能だと思います

ボイラ

6
Iolo

プラグインを使用したくない場合は、これを通知するブックマークレットがあります(一度アクティブにすると、上記のテキストにカーソルを合わせます)。

http://chengyinliu.com/whatfont.html

5
Seb Ashton

「存在しないSans」は、CSSで@ font-faceを使用してレンダリングできます。 http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

フォントのレンダリングを検出する方法がわからないので、技術的にあなたの質問に答えません。私はこれを見つけました: http://webdesignerwall.com/tutorials/css3-font-face-design-guide-guide それは、ブラウザが@ font-faceをサポートしていない場合にそれを保証するModernizrというjavascriptですArialやHelveticaなどの代替フォントをロードします。

0
Noah Rainey