Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

Math font family

MathMLや数式表示に最適化されたブラウザの組み込みフォントを使用する宣言です。数学記号やギリシャ文字が正しく表示されるよう設計されたフォントが選択されます。WebサイトでSTEM分野のコンテンツを表示する際に、外部フォントなしで適切な数式表示を実現できます。

数式フォントMathML

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.font-family.math
109
109
149
26.2
109
26.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
math, .math-content {
  font-family: math;
}
.equation {
  font-family: math, serif;
}

ライブデモ

number notationfont

CSS number notationfont demo.

プレビュー全画面表示

number notation+serif

CSS number notation+serif demo.

プレビュー全画面表示

blendtext

CSS blendtext demo.

プレビュー全画面表示

実務での使いどころ

  • 数式コンテンツの表示最適化

    教育サイトや学術論文サイトで、数式やMathMLコンテンツにmathフォントを適用して正確な数学記号表示を実現します。

注意点

  • Firefoxでは未対応のため、serif系フォントをフォールバックとして設定してください。

アクセシビリティ

  • 数式のスクリーンリーダー対応にはMathMLのセマンティック構造やaria-label属性での説明が必要です。

参考リンク