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

font-family プロパティ

 font-family プロパティは、フォントを指定するプロパティです。 指定できるフォントは、フォントファミリー名(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 明朝","MS PMincho","MS P明朝"
ゴシック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 ゴシック","MS PGothic","MS Pゴシック","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 やダウンロードしたフォントをサイトのあるサーバーに保存して利用する方法があります。
 ただし、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'、'MS ゴシック'など。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 プロパティで複数のフォントが指定できます。各値はコンマで区切ります。最初のフォントを優先するのですが、そのフォントがない場合には次のフォントが試されます。