web-dev-qa-db-ja.com

サイトで使用されているフォントを判別するためのユーティリティ？

例：私はウェブサイトで使用されているフォントが好きです： NYTimes なので、ウェブサイトで使用されているすべてのフォントをリストできるものは素晴らしいでしょう！

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

ウェブサイトをクロールしてそのフォントを一覧表示できるもの...リージョンにフォントをオーバーレイできれば素晴らしいのですが、それは行き過ぎだと思います。

software-recwebsitefonts
9
Lazer

これを実現する方法は複数あります。私はCSSがどのように機能するかに非常に興味があり、 love タイポグラフィだけなので、実際にはこれをかなり頻繁に行っています。私がこれを行うのが好きな2つの方法は次のとおりです。

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

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

    1. ページが表示されたら、ソースを表示します。 Internet Explorerを使用している場合は、[ページ]-> [ソースの表示]または[表示]-> [ソース]に移動します。 Firefox、Chrome、またはその他の最新のブラウザを使用している場合は、Ctrl + U（またはオペレーティングシステムによってはApple + U）を押します。

    2. HTMLコードで、分析しようとしているテキストコンテンツを検索します。テキストを含むいくつかのタグを見つける必要があります。それらのタグには、HTMLにハードコードされたフォントが含まれている可能性があります（<font>タグを使用するか、<p>のstyle属性にあります。 <div> Enclosure）、またはCSSを参照する場合があります（classまたはid属性を探し、これらを書き留めます）。

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

font-family cssの解釈方法：

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

例：これが<p>エンクロージャーのCSSであるとしましょう。

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

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

これにより、使用されているフォントを確認できます。 CSSを非常に優れた方法で視覚化する、十分に構築された便利なツールは見つかりませんでしたが、インスペクターオプションが機能すると思います（あまりにも混乱することはありません！） 。これが道だと思います。

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

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

  1. NYTimes.comの記事に移動し、フォントを検索するテキスト要素を右クリックして、要素の検査を押します。

    Opening the Inspector

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

    Viewing the element properties

  3. これはあなたがすることです：継承されたものを表示する]の隣の[ラジオボタンを選択してください。

    Select show inherited

  4. 他の多くのグローバルプロパティが「計算されたスタイル」の下に表示されます。

    Many global properties appear

  5. 下にスクロールリスト内で「font-family」に移動します。灰色で表示されている必要があります。これは、継承されたグローバルプロパティであることを意味します。 ここでは、使用されているフォントを確認できます。 タダ！

    Here are the fonts!

20
Maxim Zaslavsky

2つの異なるものがあります：

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

1.実際に使用されている（フォールバック）フォント

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

Firefox Fonts View

詳細については、Stack Overflowの ブラウザがテキストのレンダリングに実際に使用しているフォントを確認するにはどうすればよいですか？ を参照してください。これには以下が含まれます。

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

2.どのフォントが要求されたか

（Webサイトの作成者によって）どのフォントが要求されたかを知るために、組み込みのFirefox Page Inspectorやその Firebug拡張機能 などのツールがCSSルールの検査に役立ちます。このようなツールは、どのフォントが実際に使用されているかを教えてくれませんが、どのフォントが要求されているかを示していますCSSスタイルシートを前提として、特定の地域、または特定のWordの場合：

CSS in Firebug

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

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

Web Inspector Safariおよび Developer Tools in Chromeには、同様のオプションがあります。（Safariでは、設定からWeb Inspectorを有効にします：メニューバーに[開発]メニューを表示します。）Internet Explorerには F12ツール があります。

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

7
Arjan

これは私が出会った中で断然最高の解決策です。これはブックマークレット/拡張機能であり、表示されているテキストのピクセルをそれらと比較することで、99％の確率で確実に使用されているフォントを教えてくれます。 TypeKitおよびGoogleFont APIフォントを含む、利用可能なすべてのフォントの。

WhatFontツール

enter image description here

見てみな。

4
Max

Firefoxを使用している場合は、 Font Finder Add-on があります。それは基本的に Maxim Z。彼の答え で説明されていることを行いますが、自動的に行われるので、本当に使いやすいです。

4
Ludwig Weinzierl

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

font-family：georgia、 "times new roman"、times、serif

これがメインフォントです。 font-familyを使用してスタイルシートで何かを検索すると、残りが提供されます。

処理する：

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

画像の外側で定義されないフォントを画像で探している場合。

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

3
BinaryMisfit

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

1
Etienne Dechamps

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

Googleの使用を勧めるポスターChromeは実際に非常に良いヒントを与えてくれました-私はここで何かを学び、さらにヒントを追加したいと思いました。Chromeで登場する開発者ツールでは、あなたはしなければならないかもしれません[計算されたスタイル]をクリックし、[継承を表示]チェックボックスをクリックして、見つける前に下にスクロールします。これは極端な例ですが、表示される場所はページの構造によって異なります。

1
Matt - Christian Dating

これは単純ですが効率的な解決策です。要素（font-familyを含む）に適用された構成を示すブックマークレットです。

ジェシーのブックマークレットサイトには、この仕事に適したサイトがあります：computed styles。

どうぞ： https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles

0
Adriano P