あなたのウェブサイトの成功は、その外観に大きく依存します。 右の色の組み合わせとテーマを持つことは、少し長くあなたのサイトにあなたの訪問者を維持します。 あなたのサイトのカラーパレットと構造に加えて、あなたが選択したフォントはまた、従事してあなたの聴衆を維持する上で不可欠な役割を果た
ウェブを閲覧している間に魅力的なサイトに出くわし、それがどのフォントを使用しているかを知りたいと思うかもしれません。 オンライン拡張機能とブラウザの組み込み要素検査ツールを使用すると、フォントをすばやく簡単に識別できます。
要素の検査ツールを使用してフォントを見つける方法
あなたが知らなかった場合には、ブラウザの組み込み要素の検査ツールを使用すると、webサイトのソースコードを調べることができます。 サイトのCSS、HTML、およびその他の情報を見ることで、サイトのデザイン要素を理解できます。 それはあなた自身の場所を設計するときインスピレーションを得る大きい方法である。
要素の検査ツールを使用してフォントを識別するプロセスは非常に簡単で、コーディングスキルは必要ありません。 このツールは、市場のすべてのブラウザで利用可能であり、それぞれが同様のレイアウトを持っています。
ブラウザの検査ツールを使用してフォントを識別する方法は次のとおりです。
- 使いたいウェブサイトを開きます。
- 識別するフォントを持つテキストを強調表示し、右クリックします。
- コンテキストメニューからInspectをクリックします。
- 検査メニューが開いたら、計算されたをクリックします。
- 下にスクロールしてFont-Familyセクションを見つけます。 ここでは、フォント名とスタイル、およびその寸法を見つけることができます。
Inspectツールを使用する他の方法
Inspectツールを使用してサイトのフォントをすばやく検索する方法が必要な場合は、代わりにこれを試してください:
- 使用するwebサイトを開きます。
- Ctrl+Shift+Cを押します（MacではCmd+Shift+C）。
- テキストの上にカーソルを置くと、フォントスタイル、サイズ、カラーコード、余白が表示されます。
検査ツールを使用して、webページで使用されているフォントのリストを確認することもできます。 これを行う方法は次のとおりです:
- webページに移動します。
- Ctrl+Shift+I(MacではCmd+Shift+I)を押してソースコードを開きます。
- ネットワークタブをクリックし、フォントタブを選択します。
- ここでは、webページで使用されているすべてのフォントのリストが表示されます。
すべてのフォントのリストをリアルタイムで取得するには、webページを更新する必要があります。
ブラウザ拡張機能を使用してフォントを識別する方法
フォントを識別するより便利な方法が必要な場合は、フォント検索ブラウザ拡張機能をイ Web上のフォントを検出するのに役立つブラウザ拡張機能がいくつかありますが、最も人気のある2つはWhatFontとFont Finderです。
両方の拡張機能を使用してフォントを識別するプロセスを見てみましょう。
WhatFont
WhatFontは、複数のフォントを一度にすばやく検出するために広く普及しています。 ここでは、このツールを使用する方法です。
- ブラウザでWhatFontが有効になっている場合は、テキストの上にカーソルを置くとフォントが表示されます。
- テキストをクリックすると、ポップアップウィンドウが表示され、フォントサイズ、色、スタイルなどの残りのフォントの詳細が表示されます。
- さらに、テキストの複数のセクションを同時に選択して、同じページ上の異なるフォントを比較することもできます。
ダウンロード: WhatFont For Chrome|Firefox/Safari(Free)
Font Finder
Font Finderは、ウェブサイト上のテキストの上にカーソルを置くと、フォントの詳細も表示します。 しかし、それは技術的な詳細の多くを提供するので、あなたがwebデザインに精通していない場合、それは少し混乱を得ることができます。
そうは言っても、Font Finderは、既存のフォントをリアルタイムで新しいフォントに置き換えたいweb開発者に適しています。 これにより、永続的な変更を行う前にフォントをテストすることが容易になります。
フォントファインダーを使用してフォントをテストする方法は次のとおりです:
- webページからテキストの一部を強調表示します。
- 右クリックし、コンテキストメニューからFont Finderを選択します。
- “フォントを置換”を選択し、フォント名を入力します。 Calibriを追加して、プレビューでフォントがどのように変更されるかを見てみましょう。
- フォントをリセットする場合は、ページを更新します。
ダウンロード：Chrome/Edge/Firefox用FontFinder（無料）
画像内のフォントを確認するにはどうすればよいですか？
画像内のフォントを識別したい場合は、ブラウザの拡張機能とブラウザの検査ツールが役に立たない場合があります。 ただし、WhatFontIs、FontSquirrel、Fontspring、WhatTheFont、および他の多くのようなオンライン画像インスペクタツールを試すことができます。
画像からフォントを識別するプロセスは、すべてのツールでほぼ同じです。 WhatTheFontを使用して画像内のフォントを識別しようとしましょう。
- まだ使用したい画像をダウンロードしていない場合は、使用したい画像をダウンロードしてください。
- 画像をWhatTheFontにインポートします。
- WhatTheFontは自動的に画像内のテキストを検出します。 切り抜きボックスを縮小または拡大して、識別するフォントを囲むようにします。 終了したら矢印ボタンを押します。
- WhatTheFontは、そのギャラリー内のフォントと画像内のフォントを一致させ、あなたに密接に関連するフォントが表示されます。
- あなたはすぐに良い一致が見つからない場合は、より関連するフォントを表示するには、より多くの結果を表示をクリックし続けることができます。
Webからフォントを検出し、デザインで使用する
フォントは、ウェブサイトやグラフィックデザインの成功に重要な役割を果たします。 ウェブを閲覧しながら魅力的なフォントにつまずく場合は、上記の方法を使用して簡単に検出することができます。
Shan Abdulは工学系の卒業生です。 卒業後、フリーライターとしてのキャリアをスタートさせた。 彼は、人々が学生や専門家としてより生産的になるのを助けるために、さまざまなツールやソフトウェアを使用することについて書いています。 彼の暇な時間に、彼は生産性のYoutubeのビデオを見るのが大好きです。
シャン-アブドゥルより