2015/10/06
フォントの検証に最適!WEBサイトのフォント情報、サイズなどを解析できる機能拡張「Fontface Ninja」
WEBサイトのフォント情報、サイズなどを解析できるフォントの検証に最適な機能拡張をご紹介。
サイトのフォントを検証するとき、どんなツールを使っていますか?
デベロッパーツールや解析関連のブックマークレットなどを使っている方も多いと思います。
今回ご紹介する機能拡張は、サイト上に表示されているフォントだけを抽出して、カーソルを合わせるだけで、フォントファミリー名、サイズ、ラインハイト(行送り)を瞬時に解析する便利なツールです。
しかも、気に入ったフォントが無料で利用できるものであれば、そのままダウンロードもできちゃうスグレモノ。
最近の海外のサイトの多くはWEBフォントを多用しています。
このフォントいいな、と思ったたきにはこの機能拡張を活用したいですよね。
WEBサイトのフォント情報、サイズなどを解析できるフォントの検証に最適な機能拡張「Fontface Ninja」
「Fontface Ninja」は、WEBサイトのフォント情報、サイズなどを解析できるフォントの検証に最適なChromeとSafari用機能拡張です。
サイト上に表示されているフォントだけを表示し、カーソルを合わせるだけで、フォントファミリー名、サイズ、ラインハイト(行送り)を瞬時に解析してくれる便利なツールです。
試しに他の文章を入力したり、フォントサイズを変更することも可能ですので、事前のフォント検証にも役立ちます。
Fontface Ninjaの使い方
Chromeばかり使っているので、Chromeで使い方を説明します。
Fontface Ninjaに行き、Chromeに機能拡張を追加します。
追加すると、右上にFontface Ninjaのアイコンが表示されるので、フォントを検証したいサイトでそのボタンをクリックします。

クリックするとメニューが上からニュルッと表示されます。

そのまま調べたいフォント部分にカーソルを合わせれば、フォントの分析結果を表示してくれます。

しかし、Fontface Ninjaがすごいのはここから。
フォントがWEBフォントか、画像か、というのは一見してわからない場合があります。
そんなときには、メニューにある「Mask」をクリックしましょう。
すると、以下のように検証可能なフォントだけが表示されるのです!
こりゃ便利!!

で、実際にフォント部分をクリックすると、メニュー部分に「Type here…」というのが、表示されます。
この部分をクリックすると、テキストを入力できますので、フォントを利用する前に検証が可能です。

右隣にあるスライドバーを動かすとフォントサイズを変更することも可能です。

さらに、右隣に表示されている「Download」をクリックすれば、フォントをダウンロードできます。
ね、便利な機能拡張でしょ。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
フォント名で検索すると使用例のサイトが表示される「FontReach」が便利!
フォント名で検索すると使用例のサイトが表示される「FontReach」をご紹介。 検索対象は英語/
-
-
デザインを華やかにする無料の英語/欧文デザインフォント50
デザインを華やかにする無料の英語/欧文デザインフォントをご紹介します。 ユニークにデザインされたフ
-
-
商用利用可能な無料のWEBフォントアイコンセット「360 Web Font Icons」
個人でも商用でも無料で利用できる360個のフリーアイコンセット「360 Web Font Icons
-
-
無料で使える英語/欧文のインライン(二重線)フリーフォント21
無料で使える英語/欧文のインラインフォント=二重線が入ったフリーフォントをご紹介します。 デザイン
-
-
有名フォントも!GitHub上のフォントを検索・ダウンロードできる「Get the Font」
GitHub上のフォントを検索・ダウンロードできてしまう「Get the Font」をご紹介。 検
-
-
いちど食べたらやめれない!美味(ウマ)すぎるフードタイポグラフィがコレクションされた「FOOD TYPE」
食べることもタイポグラフィも大好きです。 では、その2つが同時に体感できるとしたら? それはも
-
-
Googleフォントのオススメがすぐわかる!Googleフォントを見つけやすく使いやすくするサービス10
GoogleフォントのオススメがすぐわかるGoogleフォントを見つけやすく使いやすくするサービスを
-
-
無料の欧文コミックフリーフォント/英語マンガフリーフォント70
無料の欧文コミックフリーフォント/英語マンガフリーフォントを70集めてみました。 フリーフォントで
-
-
無料で利用できるカッコイイ英語のフリーフォント85
和文用のフリーフォントは数が限られていますが、英語(欧文)のフリーフォントはたくさんの種類が公開され
-
-
【保存版】商用利用可!漢字も使える無料の日本語/和文フリーフォント114
フリーフォントを探すのは時間と手間がかかります。 これまでは、必要になったときだけググってフォント
