【26-1】font-familyプロパティでフォント(書体)を指定しよう

最終更新日:2018年03月31日  (初回投稿日:2018年03月06日)

font-familyプロパティは、要素で使うフォント(書体)を指定するプロパティです。

これは他のプロパティと指定の仕方がちょっと違ってて、復数の値を優先順(使って欲しい順)に並べて指定します。
フォントを限定しない、というか できない。ユーザーの環境によって入ってるフォントが違うから。
ブラウザに「このフォントを使ってほしいけど、それが無ければコレ、それも無ければコレ...」といった具合で指示するために、優先順に並べます。

本日のINDEX
  1. font-familyプロパティの値
    1. 候補は「,(カンマ)」で区切って並べる
    2. 「優先順」であるための 書き方の注意
    3. 「総称フォントファミリー名」を最後に書く
  2. フォントファミリー名(family-name)は書体のセット名
    1. フォント名の Medium とか Italic などの名称について
    2. 「" "」か「' '」の「引用符」で囲むルールがあります
  3. 総称フォントファミリー名(generic-family)は分類名
    1. serif(日本語書体ではいわゆる明朝体)
    2. sans-serif(日本語書体ではいわゆるゴシック体)
    3. monospace(等幅フォント、固定幅フォント)
    4. cursive(筆記体、草書体)
    5. fantasy(装飾フォント)
  4. 日本語サイトでの font-family の指定サンプル
    1. sans-serif(ゴシック体)の指定
    2. 游ゴシック体を含めた sans-serif(ゴシック体)の指定
    3. 游ゴシック体の指定2:font-weightプロパティを併用して解決
    4. serif(明朝体)の指定
  5. ファミリー名の英語名と日本語名を併記すべきか

font-familyプロパティは、他のフォント関連のプロパティとともに、fontショートハンドプロパティで まとめて指定することができます。
今回から数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント(書体)を指定しよう ←今日はココ
【26-2】font-sizeプロパティでフォントのサイズを指定しよう
【26-3】font-weightでフォントのウェイト(太さ)を指定しよう
【26-4】font-stretch で condensed などの文字幅を選択しよう
【26-5】font-styleプロパティでフォントを斜体に指定しよう
【26-6】line-heightプロパティで 行間(行の高さ)を指定しよう
【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考:
CSS Fonts Module Level 3 | W3C Candidate Recommendation
font - CSS | MDN

font-familyプロパティの値

font-familyプロパティは、フォントファミリー名の候補を優先順リストで指定し、ブラウザはそのフォントがあれば使い、無ければ次の候補を試す...を繰り返し、最終的に使えるフォントが無かったときは、各ブラウザで決められているデフォルトフォントを使用します。

font-familyプロパティの値
「フォントファミリー名」を「,(カンマ)」で区切って指定。
最後に「総称フォントファミリー名」を1つ指定。
グローバル値 font-family: inherit; 親の値を継承(コレ書かなくても継承するけど)
font-family: initial; 継承した親の値を解消しデフォルト値に戻す
font-family: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

候補は「,(カンマ)」で区切って並べる

候補は「,(カンマ)」で区切って並べます。

カンマで区切りながら「フォントファミリー名(family-name)」を並べて、一番最後に「総称フォントファミリー名(generic-name)」を書くルールです。

例えばこんなかんじで。

body {
	font-family: Arial, Verdana, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    }

先に書いたものほど優先順位が高い。ということは、一度使われたら、その次の候補はもう使われません
そこで、下記のような注意点があります。

「優先順」であるための 書き方の注意

・英語フォントは先に書いたほうが良い
英文字部分(タイトルとか)に、英語用フォントを使いたい場合、日本語フォントを先に書いちゃうと、英文字にそっちを使われます。日本語フォントファミリーの中にも半角英数字はあるので。
英語用フォントをその後に指定しても、英文字部分は最初の選択の日本語フォントのままで差し替わりません。なので、英文字用のフォントは先に書くのがベスト。

・Mac用のフォントを先に書いたほうが良い
Win と Mac には、それぞれシステムフォントがありますが、インストールすれば Macで Winの書体が、Winで Macの書体が使えます。
(Macは Offfice が入っていれば「MS Pゴシック・MS 明朝」などが入ってるはず。ユーザーが自分で外していなければ)
で、Macは、Macのデフォルトフォントを見慣れていると、Win用の書体で表示すると美しくない。(OSの違いの影響か、ベースラインが変だったりもします)
ですので、Macに Macのデフォルトフォントを使わせるために先に書きます。Win用のフォントをその後に書けば、Macには使われず Winには使われます。

「総称フォントファミリー名」を最後に書く

下のサンプルコードで 最後に書いている「sans-serif」が「総称フォントファミリー名(generic-name)」です。
これはフォントの分類上の名前です。

body {
	font-family: Arial, Verdana, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    }

ブラウザは、候補の「フォントファミリー名」に使えるのが無かったら、デフォルトフォントを使います。
ですが、ページのデザイン的に「明朝体にしたい」のに、ブラウザのデフォルトがゴシック体だったら、目指すデザイン意図が違っちゃう。
そこで、「指定した書体がぜんぜん無くても、せめて明朝で」といった意図で、最後に「総称フォントファミリー名(generic-name)」を指定します。

「総称フォントファミリー名(generic-name)」には serif(明朝体)・sans-serif(ゴシック体)・monospace(等幅フォント)・cursive(筆記体, 草書体)・fantasy(装飾フォント)という 5種類があります。

デジタルフォントの世界をザッと図説すると、こんなかんじです。

「フォントファミリー名」「総称フォントファミリー名」の font-familyプロパティでの指定のルールについて、順に説明します↓

フォントファミリー名(family-name)は書体のセット名

フォントファミリー名(family-name)は、フォントの「セット名」です。
同じフォントでも、ウェイト(太さ)・文字幅・斜体などを変えたバリエーションが用意されています。(バリエーションが無いフォントもあるけど)

例えば下図のように、太さ・文字幅・斜体などによって「フォント名」が違ってます。それをひっくるめたファミリーとしての名前がフォントファミリー名(family-name)です。

フォント名の Medium とか Italic などの名称について

ウェイト(太さ)による名称は、
「Regular(レギュラー)」はノーマル、「Medium(ミディアム)」はそれよりちょっと太い、さらに太くなるに従って「DemiBold(デミボールド)」「Bold(ボールド)」「ExtraBold(エクストラボールド)」「Heavy(ヘビー)」などがあります。フォントメーカーによって順序は若干違う場合もあります。
レギュラーより細いと「Light(ライト)」「UltraLight(ウルトラライト)」などがあります。

さらに斜体がかかった「Italic(イタリック)」「Oblique(オーブリーク)」があります。
Italicは元はベネツィアで聖書のために考案された手書き書体。なので小文字が手書きっぽいものが多い。Obliqueは斜体という言葉そのまま、傾いたデザインのもの。
と言っても実際には Italic と言っても斜体なだけのフォントもあるようです。

さらに文字幅を狭くした「condensed(コンデンスド)」、文字幅を広くした「expanded(エクスパンデド)」もあります。英語の新聞・雑誌のタイトルで使われるフォントに多いようです(タイトルを目立たせるために コンデンスにして文字の高さをデカくするため。逆に文字数が少ないタイトルにはエクスパンドを使ったほうが目立つ)

ウェイト別に、斜体・文字幅のバリエーションを付けることで、ファミリー全体の書体数が何十個にもなるフォントファミリーもあります。(Futuraとか Avenirとかね)

「" "」か「' '」の「引用符」で囲むルールがあります

フォントファミリー名(family-name)のうち、
・名前の中に 半角スペースがあるもの
・名前に 全角テキスト(漢字やカナなど)があるもの
は、引用符「" "(ダブルクォーテーション)または「' '(シングルクォーテーション)で囲まなければなりません。

半角英字ワンフレーズの名前以外は「" "」か「' '」で囲んでおけば間違いないです。

body {
	font-family: Arial, Verdana, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    }

最後の総称フォントファミリー名(generic-name)引用符で囲まないのがルール。

総称フォントファミリー名(generic-family)は分類名

総称フォントファミリー名(generic-name)は、フォントの「分類上の名前」で、
serif sans-serif monospace cursive fantasy の5種類があります。

serif(日本語書体ではいわゆる明朝体)

serif(セリフ)は、文字のストロークの端にある小さな飾りのこと。
(タイポグラフィの世界で「うろこ」とか「ひげ」とも呼びます)
その小さな飾りが付いたフォントの総称を ローマン(Roman)体とも呼びますが、CSSの font-family では「serif(セリフ)」と呼びます。

日本語書体の「明朝体」のフォントは「serif」に分類されていますので、「serif」と指定されていたら、日本語テキストは明朝体で表示されます。

フォント見本はこんなかんじ。
大文字の「Q」や 数字を見比べると違いがわかりやすいかも。

*システムに入って無ければ、ブラウザデフォルトフォントで表示されます
*欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

"Times New Roman"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Lucida Bright"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Palatino Linotype"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Georgia"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"ヒラギノ明朝"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"游明朝"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"HGS明朝E"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"MS P明朝"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
serif のみで指定(ブラウザデフォルトフォント)
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語

ちなみに、上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <span style="font-family:'Times New Roman',Times,serif">"Times New Roman"<br>  
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Lucida Bright',serif">"Lucida Bright"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Palatino Linotype',Palatino,serif">"Palatino Linotype"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:Georgia,serif">"Georgia"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro',serif">"ヒラギノ明朝"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:YuMincho,'Yu Mincho M','游明朝',serif">"游明朝"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'HGS明朝E',serif">"HGS明朝E"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'MS P明朝','MS PMincho',serif">"MS P明朝"<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:serif">serif のみで指定<br>
  abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
</div>

<style>
div.mihon {
    font-size:1.2rem;
    line-height:1.2;
    color:black;
    border:solid 1px #ccc;
    padding:0 .7em}
div.mihon span {
    display:block;
    margin:1em 0}
</style>

sans-serif(日本語書体ではいわゆるゴシック体)

sans-serif(サンセリフ)は、「セリフが無い」フォントの総称です。
「sans-」はフランス語で「〜が無い」って意味なんだそうです。

日本語書体の「ゴシック体」のフォントは「sans-serif」に分類されますので、「sans-serif」と指定されていたら、日本語テキストはゴシック体で表示されます。

フォント見本はこんなかんじ。
Segoe UI は Winのみのフォント、San Francisco は Mac のみのフォントです。

*システムに入って無ければ、ブラウザデフォルトフォントで表示されます
*欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

"Arial"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Verdana"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Trebuchet MS"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Century Gothic"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Avenir"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Segoe UI"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"San Francisco"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"ヒラギノ角ゴ"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"游ゴシック"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"メイリオ"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"MS Pゴシック"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
sans-serif のみで指定(ブラウザデフォルトフォント)
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語

上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <span style="font-family:Arial,sans-serif">"Arial"</span>
  <span style="font-family:Verdana,sans-serif">"Verdana"</span>
  <span style="font-family:'Trebuchet MS',sans-serif">"Trebuchet MS"</span>
  <span style="font-family:'Century Gothic',sans-serif">"Century Gothic"</span>
  <span style="font-family:'Avenir',sans-serif">"Avenir"</span>
  <span style="font-family:Segoe UI,sans-serif;">"Segoe UI"</span>
  <span style="font-family:-apple-system,BlinkMacSystemFont,sans-serif;">"San Francisco"</span>
  <span style="font-family:'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','HiraKakuProN-W3','Hiragino Kaku Gothic Pro',sans-serif">"ヒラギノ角ゴ"</span>
  <span style="font-family:YuGothic,'游ゴシック Medium','Yu Gothic Medium','游ゴシック','Yu Gothic',sans-serif">"游ゴシック"</span>
  <span style="font-family:'メイリオ',Meiryo,sans-serif">"メイリオ"</span>
  <span style="font-family:'MS Pゴシック','MS PGothic',sans-serif">"MS Pゴシック"</span>
  <span style="font-family:sans-serif">sans-serif のみで指定</span>
</div>

monospace(等幅フォント、固定幅フォント)

monospace(モノスペース)は、等幅フォント、固定幅フォントとも呼ばれ、文字の幅が固定幅になっているフォントの総称です。

最初の等幅フォントは、タイプライターの文字だって。等幅しかタイプできなかったんですね。
等幅でないフォントは、文章になった時に読みやすいように 1文字ごとにプロポーションを変えたものなので、プロポーショナルフォントとも呼びます。

初期のコンピュータフォントは、表示もプリントも「等幅フォント」だったそうです。
等幅フォントは、フォントデータ量が少なく済んで、表示処理も速いから。

昔は当然、今よりマシンの処理能力が低かったから、等幅だったですね。
Mac の等幅フォント「Monaco」は大昔からあって今でも現役。Mac日本語OS に始めて搭載された日本語フォントは「Osaka」ですが、これも今でも現役です。
Winの等幅フォント「MS ゴシック」も Windows 3 で登場して今も現役。
MS Pゴシックは「MS ゴシック」のプロポーショナルフォント という意味なんだそうです)

というわけで 等幅フォントは、ソースコードを表現する時などによく使われます。
<code>要素のデフォルトのスタイルが等幅ですよね。

フォント見本はこんなかんじ。

*システムに入って無ければ、ブラウザデフォルトフォントで表示されます
*欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

"Courier"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Courier New"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Monaco"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Lucida Console"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Menlo"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Osaka-等幅"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"MS ゴシック"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
monospaceのみで指定(ブラウザデフォルトフォント)
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語

上の見本のソースコードはこんなかんじ。

<div class="mihon">
  <span style="font-family:Courier,monospace">"Courier"</span>
  <span style="font-family:'Courier New',monospace">"Courier New"</span>
  <span style="font-family:Monaco, monospace">"Monaco"</span>
  <span style="font-family:'Lucida Console',monospace">"Lucida Console"</span>
  <span style="font-family:menlo,monospace;">"Menlo"</span>
  <span style="font-family:'Osaka-等幅',Osaka-mono,monospace">"Osaka-等幅"</span>
  <span style="font-family:'MS ゴシック','MS Gothic',monospace">"MS ゴシック"</span>
  <span style="font-family:monospace">monospaceのみで指定(ブラウザデフォルトフォント)</span>
</div>

cursive(筆記体、草書体)

cursive(カーシブ)は、筆記体・草書体のフォントの総称です。
イタリック体よりも装飾的というか、グリフが繋がっているように見せたり、ペンで手書きしたようなフォントです。

日本語システムフォントではコレに分類されたものは無いようですが、cursiveで指定するとデフォルトフォントが「斜体」で表示されるブラウザもあります。
たいていは日本語フォントはデフォルトフォントがそのまま表示されます。

フォント見本はこんなかんじ。

*システムに入って無ければ、ブラウザデフォルトフォントで表示されます
*欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

"Comic Sans MS"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Brush Script MT"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Apple Chancery"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
cursive のみ指定
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語

上の見本のソースコードはこんなかんじ。

<div class="mihon">
  <span style="font-family:'Comic Sans MS',cursive">"Comic Sans MS"</span>
  <span style="font-family:'brush script mt',cursive;">"Brush Script MT"</span>
  <span style="font-family:'apple chancery',cursive">"Apple Chancery"</span>
  <span style="font-family:cursive">cursive のみ指定</span>
</div>

fantasy(装飾フォント)

fantasy(ファンタジー)は、凝ったデザインの装飾的なフォントの総称です。
「Papyrus」「Herculanum」などがあります

日本語システムフォントではコレに分類されたものが無く、fantasyで指定しても普通にデフォルトフォントで表示されます。

フォント見本はこんなかんじ。

*システムに入って無ければ、ブラウザデフォルトフォントで表示されます
*欧文フォントに日本語の字体は無いので、そこはブラウザデフォルトフォントで表示されます

"Papyrus"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Herculanum"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Impact"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Party LET"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Curlz MT"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Harrington"
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
fantasy のみ指定
abcdefqmnwABCDEFQMNW 1234567890 美しい日本語

上の見本のソースコードはこんなかんじ。

<div class="mihon">
  <span style="font-family:papyrus,fantasy;">"Papyrus"</span>
  <span style="font-family:herculanum,fantasy;">"Herculanum"</span>
  <span style="font-family:Impact,fantasy;">"Impact"</span>
  <span style="font-family:'party let',fantasy;">"Party LET"</span>
  <span style="font-family:'curlz mt',fantasy;">"Curlz MT"</span>
  <span style="font-family:harrington,fantasy;">"Harrington"</span>
  <span style="font-family:fantasy;">fantasy のみ指定</span>
</div>

日本語サイトでの font-family の指定サンプル

実際の日本語サイトで指定する font-family のサンプルをいくつかあげておきます。
(2018年3月時点のフォント指定です)

sans-serif(ゴシック体)の指定

ウェブサイトでは、ゴシック系を選ぶ場合が多いと思います。明朝系と比べると、小さめの文字でも判読性が高いので。

で、まずは sans-serif(ゴシック体)の指定サンプルです。
(改行して解説コメントを入れていますが、実際は1行で(コメント無しで)書きます)

body {
	font-family:
	-apple-system, /*San Francisco(iOS9以上とMac OS El Capitanからの欧文フォント)*/
	BlinkMacSystemFont, /*San FranciscoのMac Chrome用*/
	Verdana, /*Win Mac 共に使える(はずの)欧文フォント*/
	"Hiragino Sans", /*Mac OS El Capitanからのヒラギノ*/
	"Hiragino Kaku Gothic ProN", /*Mac OS 10.5(Leopard)からのヒラギノ*/
	"Hiragino Kaku Gothic Pro", /*10.4以前のMacのヒラギノ*/
	Meiryo, /*Windows Vista以降*/
	sans-serif;
    }

プレビューはこちら。

サンセリフ(仏: Sans-serif)とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体(セリフ体・ローマン体とも呼ぶ)と区別するために用いられる用語。
「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。
サンセリフ - Wikipedia

これって、単に日本語デフォルトフォントを指定しているだけなので、実際は下記の指定で事足りるんじゃないか?って思いますよね。

body {
	font-family: sans-serif;
    }

でも、ブラウザのバージョンによってデフォルトフォントが違うし(特に数字)、サンセリフなら大丈夫だけど、セリフでは「font-family: serif」としてもブラウザによってはサンセリフで表示するものもあります。
最小限「欧文用フォント・Mac日本語フォント・Win日本語フォント・総称ファミリー」を指定しておくほうが無難だと思う。

游ゴシック体を含めた sans-serif(ゴシック体)の指定

Win・Mac 共に使える日本語フォント「游書体」は、Windows8以降、MacOS10.9以降から標準フォントになってます。(iOSでは使えません)
同じフォントが使えると、見た目も統一できるので便利ですね。

ただ、共通で使えると言っても、Win・Mac で違いがあり、指定には ちょっと工夫が必要です。

「游ゴシック体」の Win・Mac での違いはこちら。

・Win と Mac でフォントファミリー名が違う
・Win はウェイトが「ライト・レギュラー・ミディアム・ボールド」の4種類ある。(Mac は ミディアム・ボールド のみ)
 Win ではファミリー名で指定すると「レギュラー」で表示するため細くかすれる

「游ゴシック」の Win と Mac でのフォントファミリー名の違いまとめです。

フォントファミリー名 OS 備考
"游ゴシック体"
(Winとの違いは「体」が付くこと)
Mac ▲ Mac Chrome 61 で使えない
YuGothic
(Winとの違いは「半角スペース」が無いこと)
◯ MacはこれだけでOK
"游ゴシック" Win ▲ ウェイトが「レギュラー」になる(細い)
"Yu Gothic"
"游ゴシック Medium" ▲ Win Firefox56 までは使えない
"Yu Gothic Medium" ▲ IE11で使えない

「游ゴシック Medium」「Yu Gothic Medium」は、ウェイトを限定している「フォント名」ですが(ファミリー名ではない)、Win ブラウザではコレを font-familyプロパティで指定しても認識するものもあります。

それらを踏まえて指定したサンプルCSSがこちら。
(改行して解説コメントを入れていますが、実際は1行で(コメント無しで)書きます)

body {
	font-family:
	-apple-system, /*San Francisco(iOS9以上とMac OS El Capitan Safariからの欧文フォント)*/
	BlinkMacSystemFont, /*San FranciscoのMac Chrome用*/
	YuGothic, /*Mac用の游ゴシック*/
	"游ゴシック Medium", /*IE11用(日本語名のみに対応)*/
	"Yu Gothic Medium", /*Win Chrome, Edge, Opera, Firefox57以降用*/
	"Hiragino Kaku Gothic ProN", /*游ゴシックがないMac用*/
	"Hiragino Kaku Gothic Pro", /*10.4以前のMacの*/
	Meiryo, /*游ゴシックがないWin用*/
	sans-serif;
    }

Win の Firefox56 までは、游ゴシックを諦めて「メイリオ」にしています。
Win でヒラギノをダウンロードしている人もいるので、ヒラギノは Win用の 游ゴシックのあとに書きました。

プレビューはこちら。

サンセリフ(仏: Sans-serif)とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体(セリフ体・ローマン体とも呼ぶ)と区別するために用いられる用語。
「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。
サンセリフ - Wikipedia

コレ↓は画像です。Mac Firefox(ver57) での表示です。

游ゴシック体の指定2:font-weightプロパティを併用して解決

WIRED.jp では「游ゴシック」をメインに使っていました。(2018年3月時点)
フォント指定はこのようになっています。3行目に注目。「font-weight: 600」にしています。
なるほど、こうしておけば、游ゴシック「レギュラー」は使われないですね。ウェイト問題はコレで解決です。

body {
	font-family: "Helvetica Neue", Helvetica, Arial, YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS ゴシック","MS Gothic",sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5em;
    font-size: 1rem;
    }

通常 font-weight: 400 がノーマルサイズ( Normal(Regular、Book、Roman))で、500 にすれば Medium が使われますが、この設定ではちょっと太め(600だと Bold )にしています。(たぶんこの後の 各要素での設定でウェイト指定は変えてると思います)

font-weightプロパティ【26-3】font-weightでフォントのウェイト(太さ)を指定しようで詳細

font-familyで「MS Gothic」なども指定されているので(なぜ等幅?)、それらを取って 並び順も整理してみたのがこちら。

body {
	font-family: "Helvetica Neue",Helvetica,Arial,YuGothic,'Yu Gothic','游ゴシック',"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,sans-serif;
    font-weight: 500; /*←これはお好みで*/
    font-style: normal;
    line-height: 1.5em;
    font-size: 1rem;
    }

WIRED.jp サイトのプレビューはこちら。(Mac Firefox)

serif(明朝体)の指定

最後に日本語の「serif(明朝体)」での指定です。
本文を明朝体にすると、「読み物」的な雰囲気が出ます。

良い例があったので、「ヤフーニュースの特集ページ」を参考にさせていただきます。
子ども急増「日本一若いまち」愛知・長久手のまちづくり - Yahoo!ニュース
(リンク切れ放置します。ゴメン)

フォントサイズを大きく、line-height(行間)も多めにすると、横書きの明朝でも読みやすくなります。
(下は Mac Firefox でのプレビューです)

フォントの指定はこんなかんじになっていました。ヒラギノ明朝、游明朝などを使っていますね。

font-family:"Times New Roman","ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝",YuMincho,"HGS明朝E","MS P明朝","MS PMincho",serif;
font-size:17px;
line-height:1.9;

Mac用のヒラギノの指定が古めなので、ちょっと修正してみたらこんなかんじ。
「MS P明朝」も敢えて指定しなくて良いと思うので取りました。

font-family:"Times New Roman","Hiragino Mincho ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro","游明朝","Yu Mincho","HGS明朝E",serif;
font-size:17px;
line-height:1.9;

ファミリー名の英語名と日本語名を併記すべきか

同じフォントファミリーでも、名前が英語表記のものと日本語のものがあります。
例えば「Hiragino Mincho Pro」と「ヒラギノ明朝 Pro」など。

これは、ブラウザによってフォントを認識するのが「英語名」か「日本語名」か違うので、併記する必要があるんです。
が、Mac OS X や iOS は「英語名」だけで十分なんだって。「日本語名」で認識するブラウザは少ないので。
なので、併記が必要なのは Win用のフォントファミリー名です。

また、余談ですが、Mac では「Hiragino Kaku Gothic ProN W6」などの「フォント名(W6とかウェイト名まで入っているもの)」は、認識するブラウザが少ないです。
font-familyプロパティでは、仕様書どおりに「フォントファミリー名」だけを指定して、ウェイトを変えたければ font-weightプロパティ で指定するのがベストだと思う。

font-weightプロパティ【26-3】font-weightでフォントのウェイト(太さ)を指定しようで詳細

次回予告

次回は、フォントサイズを指定する font-sizeプロパティを使おう。
ブラウザデフォルトのフォントサイズは16pxで、<h1> 〜 <h6>要素はブラウザによってデフォルトフォントサイズが決まっています。
これらを 自由に調整できるのが font-sizeプロパティ です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.