CSS - font-family

• トップ
• CSSリファレンス
• font-family

概要

説明

フォントファミリを指定します。

<family-name>

システムにインストールされているフォント、または、または、@font-face で定義したフォントを指定します。フォント名がスペースを含む場合は "..." または '...' で囲みます。

<generic-family>

下記のいずれかを指定します。

serif

セリフ(書体の終端部につけられる突起)付きのフォント。明朝体など。

sans-serif

セリフ無しのフォント。書体終端部の突起の無いフォント。ゴシック体など。

system-ui

システムUIのデフォルトフォント。(サポート状況↗)

cursive

筆記体フォント。

fantasy

装飾の多いフォント。

math

数式の中で使用される特別なフォント。使用するフォントには OpenType の MATH テーブルなど、数式レイアウトの階層化プロセスのための追加データが含まれている必要があります。(サポート状況↗)

monospace

等幅フォント。

ui-serif

システムで規定されるセリフ付きフォント。(サポート状況↗)

ui-sans-serif

システムで規定されるセリフ無しフォント。(サポート状況↗)

ui-monospace

システムで規定される等幅フォント。(サポート状況↗)

ui-rounded

システムで規定される終端が丸いフォント。(サポート状況↗)

generic(fangsong)

中国の仿宋(Fang Song)フォント。

generic(kai)

中国の簡体字と繁体字フォント。

generic(khmer-mul)

カンボジアのクメール語のタイトルや見出しなどに使用されるフォント。

generic(nastaliq)

ウルドゥー語やカシミール語で使用されるフォント。

フォントをカンマで区切って複数指定すると、最初のものから順に探し、最初に見つかったフォントを利用します。下記の例では、Windows では「メイリオ」が無ければ「ＭＳ Ｐゴシック」、Mac では「ヒラギノ角ゴシック」が無ければ Osaka、いずれも無ければ sans-serif フォントを利用します。

font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;

使用例

 <table>
  <tr><td>serif</td><td style="font-family: serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>sans-serif</td><td style="font-family: sans-serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>cursive</td><td style="font-family: cursive">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>fantasy</td><td style="font-family: fantasy">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>monospace</td><td style="font-family: monospace">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>メイリオ</td><td style="font-family: 'メイリオ'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>ＭＳ ゴシック</td><td style="font-family: 'ＭＳ ゴシック'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>ＭＳ Ｐゴシック</td><td style="font-family: 'ＭＳ Ｐゴシック'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>ＭＳ 明朝</td><td style="font-family: 'ＭＳ 明朝'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>ＭＳ Ｐ明朝</td><td style="font-family: 'ＭＳ Ｐ明朝'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
  <tr><td>MS UI Gothic</td><td style="font-family: 'MS UI Gothic'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
 </table>

リンク

• https://drafts.csswg.org/css-fonts/#font-family-prop
• https://developer.mozilla.org/en-US/docs/Web/CSS/font-family