フォントを確認する

この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。

インスペクター をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:

1. インスペクターを開きます。
2. フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。

フォントタブは 3 つの主要なセクションに分かれています:

• "Fonts used" : 現在調査中の要素で使用しているフォント。
• 新しいフォントエディター。Firefox 61 および 62 では、このセクションがありません。
• "All fonts on page" : このセクションは、ページで使用しているすべてのフォントを表示します。Firefox 61 および 62 ではこの領域が "ページ内の他のフォント" という名前であり、"Fonts used" セクションにあるフォントが含まれません。

フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。

調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。

以下の理由のいずれかを理由として、このセクションにフォントが表示されます:

• 要素の font-family CSS 宣言の値に指定されている。
• ブラウザーのデフォルトスタイル (ラテン文字ではほとんどのブラウザーで Times New Roman) が要素に適用されており、作者が定義したフォントは与えらえていない。
• フォントが適用されたテキストコンテンツを持つほかの要素を包含しているなど、調査中の要素の子孫でフォントが使用されている。
• font-family CSS 宣言で指定されたフォントがないため、システムの既定のフォントが使用されている。

Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。

通常の (静的な) フォントでは、以下の設定を変更できます。

調査中の要素の font-size です。

em、rem、%、px、vh、vw の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。

例: 1rem が 10 ピクセルと等価である場合に単位を rem から px に変更すると、2rem は 20px になります。

調査中の要素の line-height です。

単位なし、または em、%、px の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

単位を変更すると、font-size の設定に応じて値を変換します。

例: フォントのサイズが 20 ピクセルで line-height が 1.5em である場合に単位を em から px に変更すると、値が 30px になります。

調査中の要素の font-weight です。

スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。

調査中の要素の font-style です。

この設定は、font-style プロパティの値 italic と normal を切り替えます。

フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。

このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。

このセクションでは、それぞれのフォントで以下の情報を提供します:

• フォントの、font-family における識別子と正式名称。
• システムで使用できないウェブフォントである場合は、フォントファイルの URL。あるいはコンピューターから読み込んだフォント (既定のシステムフォント、または以前システムにインストールしたウェブフォント) である場合は "システム" と表示します。URL の右にあるアイコンをクリックすると、フォントファイルの URL をコピーします。
• ウェブフォントである場合に、フォントをページに読み込む際の @font-face ディスクリプター。ディスクリプターは展開可能であり、展開するとスタイルシートで定義されたすべての構文を表示します。
• フォントをレンダリングした結果を理解するための文字列サンプル。既定のサンプル文字列は "Abc" ですが、セクションの最上部にある入力フィールドをクリックして新しい値を入力することで、編集可能です。入力した文字列は、すべてのサンプル文字列に設定されます。

Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。

バリアブルフォント または OpenType Font Variations は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。

バリアブルフォントは許容範囲が バリエーション軸 (詳しくは Introducing the 'variation axis' をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは font-weight を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。

登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を実装する場合は、その動作が定義済みの動作に従うことが必要です。

すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の font-variation-settings プロパティは、キーと値のペアでタグを使用します。例えば font-variation-settings を使用して font-weight を設定するには以下のようにします:

font-variation-settings: "wght" 350;

ただし font-variation-settings は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。

登録済みの軸と対応する CSS プロパティを以下に示します:

登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。

フォントエディターでバリアブルフォントを扱う

調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。

これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。

以下に、さまざまな軸を定義したフォントの例を 2 つ示します:

以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。

1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。

最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:

• インスペクターの 3 ペインモード を使用しているとき、フォントタブの隣に調査中の要素の CSS ルールを同時に表示します。
• ルールビューで font-family プロパティにマウスポインターを載せると、フォントのサンプルをツールチップで表示します:

  

• 上のスクリーンショットでは、font-family のフォントの羅列で、調査中の要素へ実際に適用されたフォントに下線が引かれていることにも気づくでしょう。これは、指定された多くのフォントでどれが適用されたかを簡単に発見できるようにします。