Google Chrome でレンダリングされてるフォントを調べる

Chrome

この記事は最終更新日から1年以上が経過しています。

はじめに

たまに使おうと思ったときにいつも忘れてるので、ここに書いておきます。

環境

  • Google Chrome 54
    • 注意:バージョンアップでUIが変わる場合もあります

フォントを見る方法

まず、フォントを調べたい文字を選択して、右クリックメニューから「検証」を選びます
すると、デベロッパーツールが出てきます。

crmfnt1.jpg

macOS の場合

一番上のタブで “Elements” を選択します(何もしなければ選択されています)
すると(設定を変えていなければ)、画面の左側にメニューが3つ表示されます。
この内、右下の項目を一番下までスクロールします。

crmfnt2.jpg

すると、選択した要素のフォントが表示されます。

crmfnt3.jpg

Apple TP という Web フォントが使われているみたいです。

Windows の場合

なぜか Mac と微妙に違います

一番上のタブで “Elements” を選択します(何もしなければ選択されています)
次に、サブメニューのタブで “Computed” を選択します。
そして、一番下までスクロールすると選択した要素のフォントが表示されます。

Chrome