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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
おしゃれな筆記体/スクリプト英語/欧文フォント「Sant’Elia Script」がセール&ディスカウント中
おしゃれな筆記体/スクリプト英語/欧文フォント「Sant’Elia Script」がセール&ディスカ
-
-
2014年の要チェック無料英語/欧文フリーフォント99
質のいい英語(欧文)のフリーフォントが次々に出ていますが、 今回は2013年後半から2014年現在
-
-
無料で使えるテクノ/クリスタルフリー英語フォント90+
SFやクラブ関係、最先端・近未来的なテーマなどにマッチしそうなフォントといえばテクノフォントまたの名
-
-
無料で利用できるカッコイイ英語のフリーフォント85
和文用のフリーフォントは数が限られていますが、英語(欧文)のフリーフォントはたくさんの種類が公開され
-
-
要チェック!最近公開されたかっこいい無料の英語フリーフォント38(2013.9-2014.2)
要チェックです。 2013年9月〜2014年2月ごろにかけて公開された無料フォントのうち、デザイン
-
-
無料の欧文コミックフリーフォント/英語マンガフリーフォント70
無料の欧文コミックフリーフォント/英語マンガフリーフォントを70集めてみました。 フリーフォントで
-
-
フォント名で検索すると使用例のサイトが表示される「FontReach」が便利!
フォント名で検索すると使用例のサイトが表示される「FontReach」をご紹介。 検索対象は英語/
-
-
ロゴデザインや見出しに最適!無料で使える欧文/英語フリーフォント83
ロゴをデザインするとき、既存のフォントをベースに作成することになるケースが多いと思います。 しかし
-
-
オリジナルな英語・欧文フォントを一瞬でつくれてしまう「modulator」
怖いほど簡単に、オリジナルの英語・欧文フォントを作れてしまうサービスをご紹介します。 作成できるの
-
-
商用無料!デザイナーが選ぶミニマルデザインにマッチする無料の英語・欧文フリーフォント ベスト57
ミニマルデザインにマッチするデザイナーが選んだフリーの英語・欧文フォントをご紹介します。 ミニマル