備忘録的プログラミングリファレンス

font-family プロパティ

　font-family プロパティは、フォントを指定する CSS プロパティです。 指定できるフォントは、フォントファミリー名（family-name）とそのフォントファミリー名の種類ごとの総称である generic-family です。

font-family プロパティ
/* 明朝 */
font-family: "YuMincho","游明朝体","Yu Mincho","游明朝",serif;

/* ゴシック */
font-family: "YuGothic","游ゴシック体","Yu Gothic","游ゴシック",sans-serif;

/* 等幅フォント */
font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace;

/* 筆記体 */
font-family: cursive;

詳しくは Example を参照してください

　font-family プロパティで複数のフォントが指定できます。各値はコンマで区切ります。最初のフォントが優先されます。そのフォントがない場合には次のフォントが試されます。
　大まかなフォントファミリーの区別である generic-family 名は入れておいた方がよいでしょう。以下の「 font-family プロパティの値」を参照してください。

　フォントファミリーで指定する、またはフォント名に空白が含まれている場合は引用符で囲む必要があります。HTMLテキスト内で直接「style」属性を使用する場合は、引用符'、"で囲む必要があります。

　指定フォントが使用できるかは、ユーザーの閲覧環境に依存します。ユーザーのOSに指定フォントが入っていないと代替えフォントで表示されます。
　もし設定されたフォントがブラウザにない場合（正確にはOS）は他の汎用フォントで表示されます。

ページ内 Index

font-family プロパティの値

　font-family プロパティで指定するフォントファミリー（family-name）がない場合でも似たフォントで表示してほしいものです。
　指定するフォントファミリーがない場合でも、generic-family によるゴシック、明朝体、等幅フォント、筆記体といったおおまかな候補を入れておいた方がよいでしょう。
　多くの場合、generic-family は font-family プロパティの最後に指定します。

generic-family

　ゴシック、明朝体、等幅フォント、筆記体といったおおまかな候補です。

generic-family名概要
serif明朝体。セリフ
sans-serifゴシック体。サンセリフ
system-uiOS 標準のフォント
monospace等幅フォント
cursive筆記体
fantasy装飾のある文字（あまり使わない）

family-name

　以下は、OS が Mac や Windows の標準でインストールされているであろうフォントファミリー名だけを取り上げます。

フォント種類OSfamily-name
明朝Mac"YuMincho","游明朝体","Hiragino Mincho ProN","ヒラギノ明朝 ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro"
Windows"Yu Mincho","游明朝","MS Mincho","ＭＳ 明朝","MS PMincho","ＭＳ Ｐ明朝"
ゴシックMac"YuGothic","游ゴシック体","Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro","Hiragino Maru Gothic ProN W4","ヒラギノ丸ゴ ProN W4","Osaka"
Windows"Yu Gothic","游ゴシック","MS Gothic","ＭＳ ゴシック","MS PGothic","ＭＳ Ｐゴシック","Yu Gothic UI"
等幅フォントMac"Courier New","Monaco","Osaka-Mono"
Windows"Consolas"
欧文フォントMac"Arial","Arial Black","Helvetica","Helvetica Neue","Verdana","-apple-system", "BlinkMacSystemFont","Times New Roman"
Windows"Arial","Arial Black","Segoe UI","Verdana","Times New Roman"

　利用できるフォントファミリーには Google Fonts やダウンロードするフォントがあります。
　 Google Fonts は <link> で取り込む方法を指定します。詳しくは Google Fonts のサイトを参照してください。
　ダウンロードして利用するフォントは、自サイトのサーバーに保存して利用します。@font-face の src プロパティで読み込み元のファイルを指定します。
　Web セーフであるかや web ページの読み込みに時間がかかる場合があるといったことを考慮に入れた方がよいでしょう。

構文(Syntax)

CSS

font-family: family-name | generic-family | initial | inherit ;

DOM ( JavaScript )

値の取得
String = object.style.fontFamily;
値の設定
object.style.fontFamily=" family-name | generic-family | initial | inherit ";

値（Values）

　font-family プロパティで複数のフォントが指定できます。各値はコンマで区切ります。最初のフォントを優先するのですが、そのフォントがない場合には次のフォントが試されます。
　大まかなフォントファミリーの区別である generic-family 名は入れておいた方がよいでしょう。以下の「 font-family プロパティの値」を参照してください。

　フォントファミリーで指定する、またはフォント名に空白が含まれている場合は引用符で囲む必要があります。HTMLテキスト内で直接「style」属性を使用する場合は、引用符'、"で囲む必要があります。

　指定フォントが使用できるかは、ユーザーの閲覧環境に依存します。ユーザーのOSに指定フォントが入っていないと代替えフォントで表示されます。
　もし設定されたフォントがブラウザにない場合（正確にはOS）は他の汎用フォントで表示されます。

Value摘要
family-name'Times New Roman'、'Courier'、'ＭＳ ゴシック'など。family-name　を参照のこと
generic-familysans-serif、 serif、 monospace、 fantasy, cursive, 和文フォントgeneric-family　を参照のこと
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）指定しなければブラウザの既定値
継承（Inherited）Yes
CSS AnimationNo

Example

　フォント名に空白が含まれている場合は引用符で囲む必要があります。HTMLテキスト内で直接「style」属性を使用する場合は、引用符'、"で囲む必要があります。

　font-family プロパティで複数のフォントが指定できます。各値はコンマで区切ります。最初のフォントを優先するのですが、そのフォントがない場合には次のフォントが試されます。

関連する CSS プロパティ

　関連するプロパティに以下があります。

fontfontに関するプロパティの一括指定
font-familyフォントファミリ
font-feature-settingsOpenTypeフォントのもつ文字体裁機能を指定
font-kerningフォント間の字詰め（文字間隔）
font-size大きさ
font-stretchフォントの表示幅
font-style文字のスタイル
font-variantスモールキャップの有無
font-variant-capsスモールキャップの有無
font-weight太さ

　テキストに関するプロパティには以下があります。

プロパティ概要
line-height行間
text-align、vertical-alignテキストの配置操作
background{ linear-gradient() }マーカーでラインを引いたような装飾

関連（Related）