今日の人気記事

  1. Mac - テキストエディタ「Atom」のインストール
  2. Sublime Text 3 の日本語化 - Japanize のインストール
  3. Mac - テキストエディタ「Atom」の日本語化
  4. Chrome拡張機能「Window Resizer」 - ブラウザをデバイスごとの画面サイズへ変更
  5. Windows - Sublime Text 3 のダウンロードとインストール

Chrome拡張機能「WhatFont」 - Webサイトのfont-family、font-size、line-heightを確認

スポンサーリンク

Webサイトの「font-family」「font-size」「line-height」を確認するGogle Chrome拡張機能「WhatFont」を紹介します。

Gogle Chrome拡張機能「WhatFont」は、

「このサイトのフォントかっこいい!」
「このサイト読みやすいなぁ〜フォントサイズは?」

こんなときに!わざわざソースコードを見なくても、そのサイトが使っている「font-family」「font-size」「line-height」を確認できる便利な拡張機能です。

ここではChrome拡張機能「WhatFont」の使い方を紹介します。

スポンサーリンク

Chrome拡張機能「WhatFont」

google-chrome-extension-whatfont-01
拡張機能「WhatFont」を追加しましょう。画面右上の「+ 無料」をクリックします。

google-chrome-extension-whatfont-02
クリックすると「WhatFont を追加しますか?」というポップアップが表示されるので、「追加」をクリックします。

google-chrome-extension-whatfont-03
クリックするとChromeウィンドウの右上に「WhatFont が Chrome に追加されました。」というポップアップが表示され、

google-chrome-extension-whatfont-04
「WhatFont」のアイコンが追加されます。

それでは追加した拡張機能「WhatFont」の使い方をみてみましょう。

拡張機能「WhatFont」の使い方

google-chrome-extension-whatfont-05
それでは、当サイトのトップページを例に拡張機能「WhatFont」の使い方をみていきます。

google-chrome-extension-whatfont-06
Chromeウィンドウの右上にある

google-chrome-extension-whatfont-07
「WhatFont」アイコンをクリックします。

google-chrome-extension-whatfont-08
クリックすると「Exit WhatFont」というボタンが表示されます。このボタンは「WhatFont」の使用を終了するときにクリックします。

それではマウスを適当に動かしてみましょう。

google-chrome-extension-whatfont-09
テキスト上にマウスオーバーすると、このように「font-famiy」が表示されます。

※ ここでは「Hiragino Kaku Gothic Pro」

google-chrome-extension-whatfont-10
フォントの詳細を確認したいテキストをクリックすると、

google-chrome-extension-whatfont-11
このように「WhatFont」のポップアップが表示されます。

google-chrome-extension-whatfont-12
このポップアップでは以下の項目を確認することができます。

  • 表示中のfont-family
  • font-weight
  • font-family
  • font-size
  • line-height
  • color

フォントに関するすべての項目を確認することができます。便利!

google-chrome-extension-whatfont-13
フォントの確認を終了する場合は画面右上の「Exit WhatFont」をクリックしましょう。

以上、『拡張機能「WhatFont」の使い方』の使い方でしたー。

スポンサーリンク