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

注記: この記事で示す更新されたフォントツールは、Firefox 63 以降で使用できます。古いバージョンの Firefox を使用している場合は外見が異なり、同じようには動作しません (特に、フォントエディターが使用できません)。新しいフォントエディターは Firefox Nightly または Developer Edition で使用できます!

フォントタブ

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

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

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

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

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 です。

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

注記: pt など、ほかの単位を font-sizeline-height で使用したい場合は、ルールビュー で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。

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

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

Line height

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

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

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

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

太さ

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

Font weight setting

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

注記: wght バリエーション軸を定義する バリアブルフォント (後述) は、独自の範囲を持ちます。

イタリック

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

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

注記: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。

All fonts on page

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

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

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

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

Firefox 開発ツールでバリアブルフォントをサポート

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

注記: font-variation-settings を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (font-weight など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。

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

軸タグ CSS プロパティ
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz"

font-optical-sizing

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

注記: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。

警告: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。

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

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

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

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

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

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

ヒント

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

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

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

ドキュメントのタグと貢献者

このページの貢献者: yyss, wbamberg
最終更新者: yyss,