InspectElementツールとブラウザ拡張機能を使用してWebページのフォントを検索する方法

フォントを識別するためのより便利な方法が必要な場合は、フォント検索ブラウザ拡張機能をインストールすることをお勧めします。ウェブ上のフォントの検出に役立つブラウザ拡張機能はいくつかありますが、最も人気のある2つは WhatFont です。 およびフォントファインダー 。

両方の拡張機能を使用してフォントを識別するプロセスを見てみましょう。

1。ワットフォント

WhatFontは、一度に複数のフォントをすばやく検出するために広く普及しています。このツールの使用方法は次のとおりです。

1. ブラウザでWhatFontが有効になっている場合は、テキストにカーソルを合わせてフォントを表示します。
2. テキストをクリックすると、ポップアップウィンドウが表示され、フォントサイズ、色、スタイルなどの残りのフォントの詳細が表示されます。
3. さらに、テキストの複数のセクションを同時に選択して、同じページの異なるフォントを比較できます。

2。フォントファインダー

Font Finderは、Webサイト上のテキストにカーソルを合わせると、フォントの詳細も表示します。ただし、技術的な詳細がたくさん含まれているため、Webデザインに慣れていない場合は、少し混乱する可能性があります。

とはいえ、Font Finderは、既存のフォントをリアルタイムで新しいフォントに置き換えたいWeb開発者に適しています。これにより、永続的な変更を行う前にフォントを簡単にテストできます。

FontFinderを使用してフォントをテストする方法は次のとおりです。

1. Webページからテキストの一部を強調表示します。
2. それを右クリックして、フォントファインダーを選択します コンテキストメニューから。
3. [フォントを置き換える]を選択します フォント名を入力します。 Calibriを追加しましょう プレビューでフォントがどのように変わるかを確認してください。
4. フォントをリセットする場合は、ページを更新してください。

画像のフォントを確認するのはどうですか？

画像内のフォントを識別したい場合は、ブラウザ拡張機能とブラウザの検査ツールが役に立たない場合があります。ただし、WhatFontIs、FontSquirrel、Fontspring、WhatTheFontなどのオンライン画像インスペクターツールを試すことができます。

画像からフォントを識別するプロセスは、すべてのツールでほぼ同じです。 WhatTheFontを使用して画像内のフォントを識別してみましょう。

1. まだダウンロードしていない場合は、使用する画像をダウンロードします。
2. 画像をWhatTheFontにインポートします。
3. WhatTheFontは画像内のテキストを自動的に検出します。識別したいフォントを囲むように、クロップボックスを縮小または拡大します。 矢印ボタンを押します 終わった時に。
4. WhatTheFontは、画像内のフォントをギャラリー内のフォントと照合し、密接に関連するフォントを表示します。
5. すぐに適切な一致が見つからない場合は、[その他の結果を表示]をクリックし続けることができます 関連するフォントをもっと見ることができます。

Webからフォントを検出し、デザインで使用する

フォントは、ウェブサイトやグラフィックデザインの成功に重要な役割を果たします。ウェブを閲覧しているときに魅力的なフォントに出くわした場合は、上記の方法を使用して簡単に検出できます。