WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「フォント」

font-family 「使用するフォントの指定」

ホームページで使用するフォント種類は「font-family」で指定します。指定しないとブラウザのデフォルトフォントが使用されます。

「font」を使用するとフォント種類以外のサイズなどもまとめて指定することができます。「font」

CSS Ver.適用要素継承
2.1全てする
広告

font-family のサンプル

font-familyで指定したフォントは、クライアント（パソコンやスマートフォンなど）にインストールしている必要があります。
ただ、OSやバージョンによりインストールされているフォントは異なり、fontやfont-familyでフォントを指定しても利用されない場合もあります。指定フォントが利用されない場合は、各ブラウザのデフォルトフォントが利用されます。

どの環境でも同じフォントを使用したい場合は、WEBフォント「@font-face」を使用することができますが、日本語は文字数も多くレスポンス等を考慮すると難しいと考えられます。「@font-face」

OS毎の代表的なフォント
OS和名英名OSバージョン
(以降)
WinMS UI GothicMS UI GothicWindows98
ＭＳ ＰゴシックMS PGothicWindows95
ＭＳ ゴシックMS GothicWindows3.1
ＭＳ Ｐ明朝MS PMinchoWindows95
ＭＳ 明朝MS MinchoWindows3.1
メイリオMeiryoWindoes Vista
Meiryo UIMeiryo UIWindows7
Macヒラギノ角ゴ Pro W3Hiragino Kaku Gothic ProMacOS X
ヒラギノ角ゴ ProN W3Hiragino Kaku Gothic ProNMacOS X(10.5)
ヒラギノ角ゴ Pro W6HiraKakuPro-W6MacOS X
ヒラギノ角ゴ ProN W6HiraKakuProN-W6MacOS X(10.5)
ヒラギノ角ゴ Std W8Hiragino Kaku Gothic StdMacOS X
ヒラギノ角ゴ StdN W8Hiragino Kaku Gothic StdNMacOS X(10.5)
ヒラギノ丸ゴ Pro W4Hiragino Maru Gothic ProMacOS X
ヒラギノ丸ゴ ProN W4Hiragino Maru Gothic ProNMacOS X(10.5)
ヒラギノ明朝 Pro W3Hiragino Mincho ProMacOS X
ヒラギノ明朝 ProN W3Hiragino Mincho ProNMacOS X(10.5)
ヒラギノ明朝 Pro W6HiraMinPro-W6MacOS X
ヒラギノ明朝 ProN W6HiraMinProN-W6MacOS X(10.5)
OsakaOsakaMacOS X
Osaka－等幅Osaka-MonoMacOS X
Win
Mac
(注1)		游ゴシック
游ゴシック体		Yu Gothic
YuGothic		Windows 8.1
MacOS X(10.9)
游明朝
游明朝体		Yu Mincho
YuMincho		Windows 8.1
MacOS X(10.9)
iOS
(注2)		HiraKakuProN-W3
(ヒラギノ角ゴ ProN W3)		HiraKakuProN-W3iOS
HiraKakuProN-W6
(ヒラギノ角ゴ ProN W6)		HiraKakuProN-W6iOS
HiraMinProN-W3
(ヒラギノ明朝 ProN W3)		HiraMinProN-W3iOS6
HiraMinProN-W6
(ヒラギノ明朝 ProN W6)		HiraMinProN-W6iOS6
AndroidDroid SansDroid SansAndroid
RobotoRobotoAndroid4

(注1)WindowsとMacで同じフォントが使用されるが、指定フォント名が異なる。（上段：Windows、下段：Mac）

(注2)カッコ「()」のMACとフォントが使用されるが、指定フォント名が異なる。

ページTOP

font-family の定義

【構文】

font-family  : font-name, [font-name], [font-name], …;
font-family内のSTYLE設定内容
font-family: sans-serif;
font-family: serif;
font-family: cursive;
font-family: fantasy;
font-family: monospace;

フォントに指定する予約語（キーワード）
各ブラウザの以下のフォントが使用され,
※ブラウザにより異なるので注意が必要です。
（前サンプル参照）

キーワード使用フォント種類
sans-serifゴシック体系のフォント
serif明朝体系のフォント
cursive筆記体系のフォント
fantasy装飾体系のフォント
monospace等幅フォント
font-family: フォント名;

フォント名（和名or英名）を指定します。
ブラウザによっては和名に対応していない可能性があり英名が推奨です。
たとえば、「ＭＳ ゴシック」の場合は「MS Gothic」が推奨です。

フォント名にスペースを含む場合は「"」または「'」で囲みます。
たとえば、「"MS Gothic"」や「'MS Gothic'」で指定します。

font-familyを複数指定するには？

font-familyは複数指定するのが一般的です。複数指定は「,」で区切り、左から優先されます。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>font-family指定サンプル</title>
<style type="text/css">
.fontG {
     /* --- 各ＯＳのゴシック系フォントを指定する    --- */
     /* Windows :「メイリオ」または「ＭＳ Ｐゴシック」  */
     /* Mac     :「ヒラギノ角ゴ Pro W3」                */
     /* その他  : ゴシック系フォント                    */
     font-family: "Meiryo", "MS PGothic", "Hiragino Kaku Gothic Pro", sans-serif;
}
.fontT {
     /* --- 各ＯＳの等幅フォントを指定する         --- */
     /* Windows :「ＭＳ ゴシック」                     */
     /* Mac     :「Osaka－等幅」                       */
     /* その他  : 等幅系フォント                       */
     font-family: "MS Gothic", "Osaka-Mono", monospace;
}
</style>
</head>
<body>
<div class="fontG">123abcABCあいう</div>
<div class="fontT">123abcABCあいう</div>
</div>
</body>
</html>
ページTOP

関連するCSSプロパティ

@font-faceWEBフォントを指定する（環境に依存しないフォントの指定）
font左上の角丸を指定
font-styleイタリック体（italic）、斜体（oblique）などを指定
font-sizeフォントの大きさを指定
font-variant英小文字を英大文字の小さいフォントで表示することを指定
font-weightフォントの太さを指定
line-height1行の高さを指定
ページTOP
関連するCSS(STYLE)
font文字のデザイン
font-feature-settingsOpenTypeフォントの字形の切替え
font-kerning字間スペース
font-language-override言語を一時的に変更
font-size文字の大きさ
font-size-adjust文字サイズの自動調節
font-stretchフォントの形状（幅広・幅狭）
font-style斜体のスタイル
font-synthesis太字や斜体を持たないフォントの表示方法
font-variantフォントの変換ルール
font-variant-alternates代替文字の置き換え指定
font-variant-caps英大文字での表示制御
font-variant-east-asian漢字の表示指定
font-variant-ligatures合字の制御指定
font-variant-numeric数値の表示形式指定
font-variant-position上付き文字・下付き文字の指定
font-weight文字の太さ
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン