Webサイトが使用しているフォントを知るにはどうすればよいですか？

Webサイトが使用しているフォントを確認するにはどうすればよいですか？仕事を簡単にするツールやブラウザ拡張機能はありますか？

オプション1：ブラウザー拡張機能を使用する（簡単）

WhatFont（Chrome、Firefox、Safariで使用可能）などの拡張機能を使用すると、Webページ内のテキストのフォントファミリーを簡単に検出できます。拡張機能をインストールし、サイトで有効にして、検査する要素をクリックするだけです。結果は、常に選択したコンテキストで、フローティングボックスに表示されます。

オプション2：ブラウザーインスペクターでCSSを手動で確認する（詳細）

ほとんどのWebブラウザでは、right-click「Inspect」または「Inspect Element」を使用してフォントを簡単に見つけることができます。を押すことでもできF12ます。これにより、Webサイトにアタッチされたスタイルのリストが表示されます。これを調べて、任意のHTML要素で使用されているフォントを見つけることができます。

インスペクタの使用は、拡張機能の使用ほど簡単ではありませんが、いくつかの利点があります。通常、適用されるスタイルを見つけるためにいくつかのスタイルを調べる必要があるため、CSSをある程度理解する必要があります。一般的な規則として、取り消し線が引かれたスタイルは上書きされるため、常に最後に適用されているスタイルを探してください。

ページのすべてのスタイルは[ スタイル ]タブにリストされますが、代わりに[ 計算済み ]タブを使用すると、選択した要素（フォントファミリを含む）にアクティブに適用されるプロパティを見つけることができます。

最後に、グローバルに使用されているフォント（方法や場所ではなく）をすばやく確認する別の方法は、「アプリケーション→フレーム→フォント」に移動することです。そこには、すべての参照された（非システム）フォントのリストがあります。

この2番目の方法は時間がかかりますが、インスペクターを使用すると、ページ全体の構築方法について優れた洞察を得ることができます。また、多くのデザイナーと開発者は、実際にスタイルシートに書き込む前に変更をテストするためのツールとして使用します（インスペクターでCSS行を変更すると、ブラウザーでリアルタイムのプレビューがトリガーされるため）。

ブラウザの「検査要素」は完璧ではありません

ブラウザーの開発者ツールを使用すると、WebサイトのCSSで宣言されているフォントを確認できます。ただし、実際にレンダリングされているフォントは表示されませんが、適用されているフォントスタックのみが表示されます。レンダリングされる実際のフォントは、インストールされているフォントなどによって異なります。

別の便利なツールはFountです。

Fountは、表示されるはずのフォントだけでなく、実際に表示されているフォントスタック内のWebフォントを表示します。また、フォントサイズ、太さ、スタイルもわかります。

Fountの使用は、ブックマークを追加するのと同じくらい簡単です。アプリや拡張機能をインストールする必要はありません。

ブックマークを追加した後：

1. 任意のサイトに移動して、Fountブックマークレットをクリックします。
2. 識別したいタイプをクリックします。繰り返す。
3. Fountをオフにするには、ブックマークレットをもう一度クリックします。

FountはSafari、Chrome、Firefox、IE8 +で動作します。

Chromeブラウザ拡張機能CSSViewerが大好きです。クリックするだけで、識別したいフォントにカーソルを合わせると、フォントファミリが表示されます。

FontFinderは、デザイナー、開発者、およびタイポグラファー向けに作成されています。ユーザーは、ページ上の要素のフォント情報を分析し、その情報の一部をクリップボードにコピーし、インライン置換を実行して新しいレイアウトをテストできます。

このアドオンは、フォントや、フォントの太さ、サイズ、その他多くのフォームWebページなどの他のCSSを見つけるのに最適です。