menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 3 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  5. ( 5 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 7 - ) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 9 ↑) 【PHP】PHPでシンプルなメールフォーム
  9. ( 8 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【Mac】MacにGoogle Driveをインストール
このエントリーをはてなブックマークに追加

font-family【CSSリファレンス】

font-family【CSSリファレンス】

概要

font-familyプロパティを使用してフォントの種類を指定します。指定したフォントで表示できない場合に備え、カンマ( , )で区切って複数の候補を指定することができます。その場合、指定した順に利用可能なものが選択されますが、その候補の中にも使用できるフォントがない場合はデフォルトのフォントで表示されます。


.sample {
  font-family: "MS Pゴシック","MS PGothic",Osaka,sans-serif;
}
適用要素

すべての要素

指定できる値
フォントファミリー名で指定
フォント名で指定する方法です。日本語やスペースが含まれるフォントファミリー名は引用符( "" )または( ' ' )で囲みます。Safariは日本語を使ったフォントファミリー名は認識しません。 逆にFirefoxでは日本語フォントのアルファベット表記は適用されないので、日本語で指定する必要があります。
Windows向けフォント

"游ゴシック Medium","Yu Gothic Medium"
"游明朝",'Yu Mincho'
"MS Pゴシック","MS PGothic"
"メイリオ",Meiryo
Mac向けフォント

"游ゴシック体",YuGothic
"游明朝体",YuMincho
"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"
Osaka
総称ファミリ名で指定
ゴシック体系や明朝体系など種類で指定する方法です。 総称ファミリ名はフォントファミリー名で指定したフォントが使えなかった場合にそなえ、値の最後に総称ファミリー名を指定することを推奨しています。 ゴシック体系や明朝体系など種類で指定する方法です。また、総称ファミリー名は引用符で囲いません。

sans-serif(ゴシック体系)
serif(明朝体系)
monospace(等幅系)
cursive(筆記体系)
fantasy(装飾系)
サンプル
HTML

<p class="demo1">このテキストのフォントには明朝体が指定されています。</p>
<p class="demo2">このテキストのフォントにはゴシック体が指定されています。</p>
CSS

.demo1 {
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
}
.demo2 {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}
Result

このテキストのフォントには明朝体が指定されています。

このテキストのフォントにはゴシック体が指定されています。


関連リンク

【決定版】フォントの設定はこれで決まり❗️

  • CSS font-family
このエントリーをはてなブックマークに追加