Webセーフなフォントを確認できて、簡単にコピペもできる「CSS Font Stack」

Webセーフなフォントを確認できて、簡単にコピペもできる「CSS Font Stack」

最近はWebフォントを使用したサイトが増えていますが、個人的に覚えておきたいと思ったのでメモ兼ねて紹介します。
CSS Font Stack」はWebセーフなフォントを確認できて、MacとWindowsのシェア率などの情報も確認することができます。

「Copy to Clipboard」で簡単にfont-familyをコピーできるので、使いたいフォントをそのままコピペでCSSに記述できます。

CSS Font Stack
CSS Font Stack

各フォント名の右にあるアイコンをマウスオンすることで情報を見ることができます。
上はArialの虫眼鏡アイコンをマウスオン時のキャプチャで、font-familyの記述を確認できます。
ここで表示されているものが、「Copy to Clipboard」の際にコピーされています。

CSS Font Stack

上はArialのインフォアイコンをマウスオン時のキャプチャで、ここではMacとWindowsのシェア率を確認できます。
Webセーフのフォントとはいえ、例えばHelveticaはかなり有名なフォントですがWindowsのシェア率がかなり低いといったこともあるので、そういったことを考慮する際に役立ちそうです。

Close the search window,
please press close button or esc key.