サイトで使用されているフォントを判断するためのユーティリティ？ [閉まっている]

9

例：私はウェブサイトで使用されているフォントが好きです。 NYTimes なので、 Webサイトで使用されているすべてのフォントを一覧表示する 素晴らしいことだ！

私がやります ではない 欲しいです 画像処理ユーティリティ それはスクリーンショットや分析するサイトを分析することができます フォントについて質問する リストから絞り込みます。

Webサイトをクロールしてそのフォントを一覧表示することができる何か...それが地域のフォントをオーバーレイすることができればそれは素晴らしいことですが、それは行き過ぎだと思います。

software-rec  website  fonts 
— Lazer
ソース
@Arjanなぜ:-(？探していないものを明示的に述べましたが、それがそこにあるほとんどの答えの主題でした。
— Lazer
Firefoxは今日、これを非常に簡単にしています。 私の最新の回答を見る 。
— Arjan

回答:

20

これを実現するには複数の方法があります。 CSSがどのように機能するかに非常に興味があるので 愛 タイポグラフィ。これを行う2つの方法は、次のとおりです。

  • ブラウザで「インスペクタ」を使う（これがあなたが探しているものです！） - 私が使う グーグルクローム （私はそれが大好きだから） 内蔵のインスペクタツール 。あなたは本当にそれを試すべきです。あなたはただサイトに行き、あなたが分析したいどんな要素でも右クリックして、そしてコンテキストメニューから "Inspect Element"をクリックするだけです。インスペクター HTMLとCSSの動的プロパティを表示します。 つまり、テキスト要素を調べるとしたら、 font-family cssプロパティ （右側のサイドバーにある）インスペクタで、フォントが何であるかがわかります（このCSSの解釈方法については、以下を参照してください）。 Firefox用のFirebugを使用して同様のことを実行できますが、Google Chrome Inspectorツールははるかに優れていると考えています（私はWeb開発者であり、すべてに使用しています）。

  • または、ページのソースを手動で表示してCSSを分析することもできます。これを行う方法は次のとおりです。

    1. あなたがページにいるとき、ソースを見てください。 Internet Explorerを使用している場合は、ページに移動します - ＆gt;ソースの表示または表示 - ＆gt;ソース。 Firefox、Chrome、またはその他の最近のブラウザを使用している場合は、Ctrl + U（またはオペレーティングシステムによってはApple + U）を押します。

    2. HTMLコードで、分析しようとしているテキストコンテンツを検索します。あなたはテキストを含むいくつかのタグを見つけるべきです、そしてそれらはHTMLにハードコード化されたフォントを持っているかもしれません（ <font> タグまたは style の属性 <p> または <div> または、CSSを参照している可能性があります。 class または id 属性、およびこれらを書き留めます。

    3. 後者の場合（CSSを参照している場合）、HTMLの先頭に移動して <link> のタグ <head> ページのリンクがスタイルシートを参照している場合は、そのスタイルシートを参照してください。そのCSSスタイルシートに移動して、書き留めたクラスまたはID識別子を検索するだけです。どこかで、あなたは対応するものを見つけるでしょう font-family プロパティ（忘れないでください、サイト全体でフォントをグローバルに設定することもできます。これは <body> タグか何か他のもの。これが、あなたがインスペクタツールを使うべき理由です、なぜなら、この困難は克服されるからです。

を解釈する方法 font-family css：

の font-family プロパティはフォントが何であるかを決定します。この物件では、 フォントはカンマで区切ります 。ページをレンダリングするとき、ブラウザは このリストを見て、コンピュータ上にある最初のフォントを使用してください。 。多くの場合、このプロパティの最後にはフォントカテゴリもあります。これは「ジャストインケース」であり、他に利用できない場合はそのカテゴリのデフォルトフォントが使用されます。

例：これが、次のような場合のCSSです。 <p> エンクロージャ。 

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

ここでは、フォントが利用可能な場合、ブラウザは最初にCalibriを使用しようとします。そうでない場合は、Comic Sans MS、またはGeorgia、または他のフォントが使用できない場合はデフォルトのsans-serifフォントを使用します。

これは、どのフォントが使用されているかを調べる方法です。 CSSを非常に良い方法で視覚化するための十分に構築された便利なツールは見つかっていません。 も 混乱します！）私はこれが進むべき道だと思います。

インスペクタツールを使ってNYTimesフォントを見つける方法の例：

本文の本文のフォントを見つける方法を説明します。 NYTimesの記事 Google Chromeで。

  1. NYTimes.comの記事に行き、フォントを探したいテキスト要素を右クリックしてヒット 要素を検査 。

    Opening the Inspector

  2. 右側のサイドバーを見てください。の中に 計算スタイルドロップダウン この要素のCSSプロパティが表示されます。しかし、ご覧のとおり、ここにはfont-familyプロパティはありません。つまり、この特定の要素だけでなく、フォントがグローバルに定義されています。しかし、これを回避する方法があります。

    Viewing the element properties

  3. これはあなたがすることです： ラジオボタンを選択 [継承を表示]の横にあります。

    Select show inherited

  4. 他の多くのグローバルプロパティが[Computed Style]の下に表示されます。

    Many global properties appear

  5. 下へスクロール リストの中の "font-family"。それは灰色であるべきです、それはそれが継承されたグローバルプロパティであることを意味します。 ここでは、使用されているフォントを見ることができます。 ただ！

    Here are the fonts!

— Maxim Zaslavsky
ソース
今すぐNYTimesの説明例を追加します。
— Maxim Zaslavsky
Thanks ppl私はこの場所が大好きです - www.superuser.com、さらにもっと今:)
— Lazer
@ Maximz2005、いくつかの選択では「計算スタイル」ドロップダウンが表示されません。空のスタイルドロップダウンが表示されるだけです。何故ですか？
— Lazer
1
インスペクタは本当にWebKitインスペクタなので、後のベータ版にはより新しいバージョンのWebKitも含まれると思いますか？新しいバージョンでは、もちろん新しいバグが表示される可能性がありますが、たぶん発生したのではないかと思います。 Chromeで使用されているWebKitのバージョンを表示する方法はありますか？
— Arjan
1
私のWebKit 532.0 @Maxim Zです。私は私の友人のクロムで試しました（バージョン3.何か）。それは完璧にそこで働いています。私はついに私が望んだ方法でフォントを検出することができます。これで、「要素の検査」機能が本当にクールであることがわかりました。
— Lazer
7

2つの異なることがあります。

  1. どのフォントが実際に使用されているか（ブラウザ/オペレーティングシステムによって）。
  2. どのフォントが（Webサイト作成者によって）要求されたか。

1.どの（代替）フォントが実際に使用されているか

どのフォントが正しいのかを確実に知るため 中古 お使いのコンピュータ/オペレーティングシステムの特定のブラウザでは、現在FirefoxとChromeにそのための組み込みツールがあります。 Firefoxのページインスペクタのように フォントビュー ：

Firefox Fonts View

詳細については、 テキストを表示するためにブラウザが実際に使用しているフォントを確認するにはどうすればよいですか。 スタックオーバーフローそれは含まれています：

  • テキストには、CSSで定義されているフォントではないUnicode文字が含まれている可能性があります。 複数 フォントは単一の要素で使用される可能性があります。
  • 同じマシン上の各ブラウザが同じフォントを使用するとは限りません。 タイプ （TrueType、Apple Advanced Technology、Microsoft OpenType、OpenType PostScriptなど）したがって異なるフォントを使用する可能性があります。そのため、他のブラウザで使用されているフォントを特定する必要があるかもしれません。

要求されたフォント

どのフォントが（Webサイトの作成者によって）要求されたのかを知るには、組み込みのFirefox Page Inspectorやそのフォントなどのツールを使用します。 Firebugエクステンション CSSの規則を調べるのに役立ちます。そのようなツールは、実際にはどのフォントであるのかわかりません 中古 しかし、どのフォントが 要求された CSSスタイルシートを考えると、特定の地域、あるいは特定の単語に対して

CSS in Firebug

上記はFirebugです。まず右側のスタイルメニューから "計算スタイルの表示"を選択します。次に、左側の矢印ボタンをクリックします。そして、あなたの興味のあるテキストをクリックしてください。これにより、右側のCSSスタイルシート情報が更新されます。見る 機能 CSSの機能について学びます。

一部 Firebug Lite 他のブラウザでも利用可能ですが、私はそれを使ったことがありません。

Webインスペクタ Safariで 開発者ツール Chromeでも同様のオプションがあります。 （Safariでは、環境設定でWebインスペクタを有効にします。 メニューバーに現像メニューを表示 Internet Explorerには F12ツール 。

e-t172のように 注目される ： Web開発者ツールバー Firefoxの場合もこの情報を表示することができます。ただし、CSS»スタイル情報を表示しても「継承」（「カスケード」）スタイルは表示されず、クリックした地域に固有の情報のみが表示されます。代わりに、ある種のオーバーレイを取得して実際にフォント情報を表示するには、代わりに情報»表示要素情報を使用できます。どこかのページをクリックするといつでも詳細が表示されます。

— Arjan
ソース
+1私よりもはるかに詳細な答えを得るために。
— BinaryMisfit
どのようにこれらのフェードスクリーンショットを手に入れましたか？ Macのように見えますが、VistaまたはXPで同様の効果が得られる可能性はありますか？
— Lazer
@Lazer、Mac上のSkitch（ただし、OS Xにはウィンドウの境界が非常に細いため、影は標準的なものであり、必須のものです）。 Windowsでそれを成し遂げる方法がわからない。
— Arjan
4

Firefoxを使用している場合は Font Finderアドオン 。 基本的には マキシムZ。 に記載されている 彼の答え しかし、自動的に、それでそれは本当に使いやすいです..

— Ludwig Weinzierl
ソース
Font Finderはまさに私が探していたものです。 Chrome用の同様の拡張子があった場合のみ。
— kangax
@kangax、今日はあります。見る アレックの答え
— Arjan
そして@kangax、今日のFirefoxとChromeは本当のフォントを決定するための組み込みツールを持っています。もう推測する必要はありません。
— Arjan
4

これは私が遭遇したはるかに最高の解決策です。これはブックマークレット/エクステンションで、99％の時にあなたに教えてくれるでしょう。 確かに TypeKitフォントやGoogle Font APIフォントなど、表示されているテキストのピクセルと使用可能なすべてのフォントのピクセルとを比較して、使用されているフォント。

WhatFontツール

enter image description here

見てみな。

— Max
ソース
いい、とてもいいですが、実際にはピクセルを比較しているとは思われません（今日では）。 CSSがちょうど言うとき font-family: sans-serif それがまた報告されたものです - しかし、それ自体はフォントではありません。使用するとき font-family: someUnknownFont 私は (default font) 結果として、それは実際に私のMacではTimesです。 （ブックマークレットでテストし、 このJS Bin ; スクリーンショット それでも、再び：いいね！
— Arjan
@Arjun私は2、3ヶ月前にそれをいくらか詳細に調べました、それで私は私が覚えることができるように説明するでしょう。フードの下で、それは2つのことをします。それは使用しています window.getComputedStyle 計算されたフォントファミリを取得します。その後、各フォントのピクセルと表示されているピクセルを比較して、このスタックを繰り返します。最初の一致はポップアップでイタリック体で表示されているもので、残りは通常どおりに表示されます。一致がない場合は表示されます (default font)。あなたが見ている理由 sans-serif それは正しくそれをそれに一致させるからです sans-serif フォントは、現在のところそれ以上識別できません。
— Max
Firefoxはこれにとって私の新しい親友です。 私の最新の回答を見る :-)
— Arjan
3

私はソフトウェアを知りません。私はInternet Explorerを使用したところ、使用されているフォントが次のとおりであることがわかりました。

フォントファミリー：グルジア、 "times new roman"、times、serif

これがメインフォントです。 font-familyを使ってスタイルシートを検索することで、残りの部分が得られます。

プロセス：

  • ホームページを右クリック
  • rel = stylesheetの行と添付されているスタイルシートのURLを探します。
  • コピーしてブラウザに貼り付け、CSSファイルをダウンロードします。
  • テキストエディタで開きます。

あなたがイメージの外で定義されないイメージの中のフォントを探しているならば。

はい私は非常に退屈していました。やはり金曜日の午後です。彼らはスタイルシートを定期的に更新するので私はリンクを投稿しませんでした。

— BinaryMisfit
ソース
Uhuh、FirefoxのFirebug、それともSafariのWeb Inspector ...？
— Arjan
1
私の言ったように。私は退屈していました。ブラウザの種類と表示ソースを変更します。他にもツールがありますが、それを単純にしておくことが必ずしも間違った方法ではありません。
— BinaryMisfit
Firefoxだけに頼る以外に何かをユーザーに教えるということだけでは意味がありません。
— random
ウィキペディアによると、両方 georgia そして times new roman 書体です。それで、結果はどういう意味ですか？これら二つの書体の組み合わせは？
— Lazer
1

Web開発者のFirefox拡張機能を使用して、Webページの特定の部分で使用されているすべてのスタイルを確認できます。 CSSメニューの[スタイル情報の表示]を使用します。次に分析したいテキストをクリックし、結果から "font-family"プロパティを検索します。

— Etienne Dechamps
ソース
情報»要素の表示情報がうまく機能します（継承されたスタイルも表示されますので、自分で検索する必要はありません）。
— Arjan
1

多くの人が言ってきたこととは反対に、それは必ずしも単なるソースの表示などの問題ではありません。CSSがドキュメント内にあるか外部CSSファイル内にあるかによって異なります。外部の場合は、実際にはファイル内に存在しないため、ソースを表示してfont-familyタグを見つけることはできません。

Google Chromeの使用を推奨するポスターは、実際には非常に良いヒントを与えています - 私はここで何かを学び、追加のヒントを追加したいと思いました。 Chromeに登場する開発者向けツールでは、[Computed Style]をクリックしてから[Show Inherited]チェックボックスをクリックし、次にスクロールするまでスクロールダウンする必要があります。ページの構造

-1

それがインラインCSSではない場合は、単にソースビューでページを開いてください。 "/themes/01.css"のようなCSSアドレスをブラウザのURLにコピーします。リターンペーストをテキストエディタまたはCSSエディタでコピーします。細かいフォントやフォントファミリーにはfindを使います。サイズやその他の属性（太字、斜体など）にページフォントを表示するために使用される、リストされたフォントファミリ

ありがとう ドロント

— Get a free back link
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.