[ウェブサービスレビュー]ウェブページ上で用いられているフォントの種類を表示できる「WhatFont Tool」

  • このエントリーをはてなブックマークに追加
Chengyin Liu
内容:「WhatFont Tool」は、ウェブページに用いられているフォントの種類をポップアップ表示できるサービスだ。マウスポインタを該当のフォントに重ねるだけで、表示されているフォントの種類を知ることができる。

 「WhatFont Tool」は、ウェブページに用いられているフォントの種類をポップアップ表示できるサービスだ。マウスポインタを該当のフォントに重ねるだけで、表示されているフォントの種類を知ることができる。

 前回紹介した「WhatFontis.com」は、画像に使われているフォントを解析して教えてくれるサービスだったが、本サービスが教えてくれるのはHTML上のテキストに用いられているフォントの種類だ。わざわざテキストエディタなどでスタイルシートを開いてフォントの種類を確認しなくとも、知りたいと思ったフォントがあればマウスオーバーするだけで確認できるのが利点だ。

 利用にあたってはブックマークレットを用いるか、ChromeまたはSafariであれば機能拡張も用意されている。それぞれを有効化した状態で、マウスポインタを該当のフォントに重ねれば、使用されているフォントの種類がポップアップ表示される。スタイルシートでフォントが指定されていればそのフォント名が、指定されていなければブラウザ標準のフォントが表示されるので、気になるフォントの種類をすばやく知ることができるというわけだ。

  • 「WhatFont Tool」トップページ。サイトは英語だが、実際にはブックマークレットもしくは機能拡張を用いるのでとくに英語がわからなくとも支障はない

  • 利用にあたっては、トップページ下部からブックマークレットもしくは機能拡張をインストールしておく

  • ブックマークレットの場合、クリックして有効化した状態でページ上のフォントにマウスポインタを重ねると、使われているフォントの種類がポップアップ表示される。ここでは「franklin-gothic-urw-cond」と表示された

 日本国内のウェブサイトの場合、フォントの種類が指定されているケースはもともと少なく、ブラウザ標準のフォント、具体的にはWindowsならMS Pゴシックがそのまま使われているケースが大半だが、英語圏のサイトでは見出しと本文とでそれぞれ異なるフォントが指定されているケースも少なくないため、これらを知るのに役立つ。また、日本語に対して英語フォントを指定しているなど、見た目は正しいがスタイルシートにおけるフォントの記述の誤りを発見できたりと、アイデア次第で役立つサービスと言えそうだ。

  • テキストで記述されてさえいれば、このようにマウスオーバーで展開するメニューなどでも取得可能

  • 日本語の場合はフォントの指定がないケースが多く、ブラウザ標準のフォントが表示されることがほとんどだが、稀にスタイルシート上でフォントの指定をミスしているのを見つけたりと、チェッカーとして効果を発揮する

  • このエントリーをはてなブックマークに追加