デザインに興味がある場合でも、特定のWebサイトの外観に似ている場合でも、サイトが使用しているフォントの種類とサイズを把握することで、エミュレートしたり、自分のWebサイトで使用したりできます。 これを実現するにはいくつかの方法がありますが、ここではそれらのいくつかを紹介します。 Webサイトでフォントの種類とサイズを確認する場合は、先に進んでください！
文字通り何百万ものフォントがあるので、完璧なフォントを見つけるのに必要以上に時間がかかる可能性があります。 良いものを見つけたら、それがすぐそこにあるものを見つける必要があります。そうでなければ、それを永久に失う可能性があります。 特に優れている場合は、フォントの種類に応じて、Officeフォントとして、またはWindows内で独自のWebサイトで使用できます。 一部のフォントは著作権で保護されており、一般に使用できないことに注意してください。
Webサイトでフォントの種類とサイズを確認する
Webサイトでフォントの種類とサイズを確認するには、いくつかの方法があります。 最も簡単な方法はブラウザ自体を使用し、他の方法ではサードパーティのツールを使用してページ資産を識別します。 両方のタイプについて説明します。 最初に、組み込みのブラウザメソッドに焦点を当てます。
- 好みのページを右クリックして、Inspect Element（Firefox）、Inspect（Chrome）、またはF12 Developer Tools（Edge）を選択します。
- 新しい下部のウィンドウでインスペクター（Firefox）を選択し、フォントが表示されるまで右にスクロールします。 フォントファミリ、使用されている特定のフォント、サイズ、色、およびページで定義されているその他のものを表示する必要があります。
さまざまなCMSおよびさまざまなWebデザインは、さまざまな方法でフォント情報を表示します。 いくつかのWebページでこの方法を試してみると、フォントが定義されているいくつかの異なる方法が表示される可能性があります。
フォントの種類とサイズを識別するサードパーティのツール
プラグインまたはブックマークレットとして機能し、フォントタイプを識別できるサードパーティアドオンがいくつかあります。 Safariを含むほとんどのブラウザで動作するため、問題なく作業できるものを見つける必要があります。
ファイアバグ
Firebugは、開発者向けのFirefox専用のデバッグツールでした。 これは非常に人気があり、現在はブラウザに依存せず、ほとんどのブラウザで動作します。 これは、フォントを含むWebページのあらゆる要素をチェックできる、非常に用途の広いツールです。
通常どおりアドオンをインストールし、ページ上のテキストを強調表示し、Firebug内のHTMLタブをクリックしてから、右側の「計算済み」をクリックします。 Firebugは、フォント名、フォントファミリ、サイズ、重量、および必要なすべてを強調表示する必要があります。
ただし、2017年の時点でFirebugは廃止されていることに注意してください。古いバージョンは引き続きダウンロードできますが、更新されなくなり、Firebugはブラウザーの進化に伴い機能を失う可能性があります。
WhatFont
WhatFontは、Webページ上のフォントを識別できるブックマークレットです。 ブックマークレットをブックマークバーにドラッグし、それを使用して、どこにいてもほぼすべてのフォントを識別します。 使用は無料で、非常に簡単です。 好きなWebページに移動し、ブックマークレットをクリックして、特定したいフォントにカーソルを合わせます。 その上に小さな黒いボックスが表示され、フォントが示されます。
更新されると、関連するアドオンとの互換性も確保されます。
繰り返しますが、CMSの構成方法またはページの設計方法に応じて、これは単純なフォント識別またはサイズ、色、重量などを提供するフルボックスになります。
フォントを識別できるブックマークレットタイプのアドオンがたくさんあります。 WhatFontはその1つにすぎません。 使いますか？ この記事はあなたに新しいものを試すよう説得しましたか？ 以下にお知らせください。
