Modern
日本語フォント指定
Sep 24, 2016
PixelGrid, Inc. @tacamy自己紹介• @tacamy• 山田敬美 Takami Yamada• PixelGrid, Inc. 7px目
• Frontend Engineer• AtomVSCodeCSSによる
日本語フォントの指定
それは

つらい

つらみの原因•

OS・バージョンごとに異なるバンドルフォント•

ブラウザごとに異なるデフォルトフォント•

環境ごとにインストールされているフォントが異なる

あちらを立てればこちらが立たず……

ベストな方法なんてないんだちょっと待って最近のフォント事情•

游ゴシックがWindows / Mac共通のバンドルフォントに•主要ブラウザすべてで@font-faceがサポートされる

OSやブラウザの進化に合わせてフォント指定の方法もアップデートしようこのセッションの目的•

最近のバンドルフォントの状況を知る•

フォント関連のCSSの理解•

フォントの仕組みの理解•脱コピペ

状況に応じた適切なフォント指定を自分でできるように

話すこと
•

OSと最近のバンドルフォント•font-family指定の基本をおさらい•游ゴシックを使ってみる•

游ゴシックのウエイト問題•@font-faceで独自のフォントファミリーをつくる•ケーススタディOSと最近のバンドルフォント

Windows•Windows 8.1 〜••

游ゴシック Light / Regular / Boldが追加（Yu Gothic）

Windows 10 〜•

游ゴシック Mediumが追加•Yu Gothic UIが追加（システムフォント）•Windows 7 〜 8.1も游ゴシック 游明朝フォントパックでWindows 10と同じ游ゴシックセットが使える※（）内はフォントファミリー名

OS X•OS X 10.9〜••

游ゴシック Medium / Boldが追加（YuGothic）

OS X 10.11〜•San Franciscoが追加（システムフォント）（-apple-system）•ヒラギノ角ゴシックのウエイトが増える（Hiragino Sans）•Hiragino Kaku Gothic ProN : W3 or W6•Hiragino Sans : W0 〜 W9の10段階iOS•iOS 9〜•

San Franciscoが追加（システムフォント）（-apple-system）•ヒラギノ角ゴシックのウエイトが増える（Hiragino Sans）•Hiragino Kaku Gothic ProN : W3 or W6•Hiragino Sans : W0 〜 W9の10段階

Android••Android 4 〜•Roboto（英字）が追加（システムフォント）•

モトヤフォントが追加（システムフォント）

Android 6 〜•

Noto Sans CJKが追加（システムフォント）

OS別 おすすめフォント•Windows
•

•OS X
•

•San Francisco + ヒラギノ or 游ゴシック

ヒラギノの英数よりもSan Franciscoの方がキレイiOS••

游ゴシック or メイリオ

指定しないとChromeとFirefoxのデフォルトがMS Pゴシックに……

San Francisco + ヒラギノ

OS Xと同様

Andorid•sans-serif

OSや機種、個人環境ごとにフォントがバラバラのためシステムフォントにまかせて指定はなるべく避けたいfont-family指定の基本をおさらい英名と和名•昔は古いブラウザ向けに和名と英名の併記が必要だった
font-family: "游ゴシック", "Yu Gothic", sans-serif;•今の主要ブラウザでは英名のみで大丈夫
font-family: "Yu Gothic", sans-serif;OSごとに異なるフォント名•

同じ名前のフォントでもOSごとに別フォントのためfont-familyに指定する値が異なる場合がある•

游ゴシックの例：•OS X : 游ゴシック体 or YuGothic•Windows : 游ゴシック or Yu Gothic

英数と日本語で異なるフォントを適用••

font-familyの仕様•

font-familyには複数のフォントファミリー名を指定できる•該当するフォントがなければ次のフォントを適用

英数のセットしかないフォントを先に指定して、その次に日本語フォントを指定すればよい游ゴシックを使ってみる游ゴシックはWindowsとOS X共通の日本語フォント

游ゴシックならWindowsとOS Xでサイトの印象を統一できるな！
よーし！

font-family: "Yu Gothic", YuGothic, sans-serif;
WindowsOS X

Windowsで細い•OS XChrome•WindowsChromeなんで游ゴシックのウエイト問題

OSに入っている游ゴシックのウエイト
游ゴシックのウエイト

Windows
10Windows
8.1

OS X

Light

○

○-Regular○○-Medium

○-

○

Bold

○

○

○

font-weightの値と適用されるウエイト
CSSのfont-weight

游ゴシックのウエイト

Windows
10Windows
8.1

OS X

300
right

Light

○

○-

400
normalRegular

○

○

-

500
mediumMedium

○-

○

700
bold

Bold

○

○

○

OS Xに游ゴシックRegularがないために起こった悲劇だったとはいえ
游ゴシック Regularは細くて読みづらい

OS Xに合わせてWindowsでも游ゴシック Mediumを使おうどうやって？

❌ font-weight: 500;
CSSのfont-weight

游ゴシックのウエイト

Windows
10Windows
8.1

OS X

400
normalRegular○○-500
mediumMedium

○-

○700
bold

Bold

○

○

○

游ゴシック以外のフォントが適用された場合にそのフォントまで太くなってしまう❌ font-family: 'Yu Gothic Medium';
CSSのfont-weight

游ゴシックのウエイト

Windows
10Windows
8.1

OS X

400
normalRegular○○-500
mediumMedium

○-

○700
bold

Bold

○

○

○

font-weight: bold; 時、游ゴシック Boldが適用されず、游ゴシック Mediumが無理やり太らされるため汚くなるつらい@font-faceで独自のフォントファミリーをつくる@font-faceとは？
•複数の異なるフォントを組み合わせて独自にフォントファミリーを定義できる•

一般的にWebフォントを適用する場合に利用されるがlocal()構文を使うとローカルにあるフォントも指定できる@font-face {font-family: 定義するフォントファミリー名;
font-weight: 定義するウエイト;
src: local(ローカルフォントのフォントフェイス名);}

フォントファミリー名とフォントフェイス名の違い••

フォントファミリー名（Yu Gothic）•

font-familyに指定できる値•

フォントファミリーは複数のウエイトのフォントを含んでいる

フォントフェイス名（YuGothic-Regular）•

フォントファミリー内の単独のフォントの一意な名前

フォントフェイス名の調べ方

1. フォントのnameテーブルを確認
DTL OTMaster 3.7 Lightを使って游ゴシック Mediumのnameテーブルを表示

2. Postscript nameを探す@font-faceのlocal()にはnameID = 6のPostscript nameを使用する

@font-faceでデフォルトが游ゴシック Mediumになるよう指定@font-face {font-family: "MyYuGothicM";
font-weight: normal;
src: local("YuGothic-Medium"); /* Postscript name */}@font-face {font-family: "MyYuGothicM";
font-weight: bold;src: local("YuGothic-Bold"); /* Postscript name */}html {
font-family: MyYuGothicM, YuGothic, sans-serif;}
WindowsOS X

Windowsでも読みやすく•游ゴシック
Regular適用
デフォルト

•

游ゴシック
Medium適用

⭕

⭕

⭕
…

ChromeでMS Pゴシックに•Windows
Chrome•WindowsEdge

なんでChromeで游ゴシックが適用されない理由•

仕様では、@font-faceのlocal()構文にはPostscript name（or nameID = 4のFull font name）を指定することになっている•

なぜか、Chromeではおそらくlocal()構文の値としてnameID = 1のFont Family nameが使われる

游ゴシック MediumのFont Family name
"Yu Gothic Medium"フォントファミリー名なのにYu Gothic Medium？
Yu Gothicじゃないの？

Windows游ゴシックのフォントファミリー
游ゴシックのウエイト

Font Family name

Font Subfamily nameLight

Yu Gothic Light

RegularRegular

Yu Gothic

RegularMedium

Yu Gothic Medium

RegularBold

Yu Gothic

Bold•

RegularとBoldは、同じYu Gothicというフォントファミリーの一員•LightとMediumは独立したフォントファミリーのRegularウエイト

Chromeに対応@font-face {font-family: "MyYuGothicM";
font-weight: normal;
src: local("YuGothic-Medium"), /* Postscript name */local("Yu Gothic Medium"); /* for Chrome */}@font-face {font-family: "MyYuGothicM";
font-weight: bold;src: local("YuGothic-Bold"), /* Postscript name */local("Yu Gothic");/* for Chrome */}Windows 8.1には
游ゴシック Mediumがないけれど、その場合どうなるの？

游ゴシック Mediumはないが
游ゴシック Boldはある場合の表示•Windows 8.1 Chrome
normal: 游ゴシック Regularbold : 游ゴシック Bold

•Windows 8.1 IE11normal : 游ゴシック Bold
bold : 游ゴシック Bold

•Windows 8.1 Firefox
normal : MS Pゴシック
bold : 游ゴシック Bold

MediumがなければRegularを使おう•游ゴシック MediumがなくてBoldがある環境が限定的•Windows 8.1かつOﬃce用フォントパックを入れていない場合のみ•

そもそもWindows 8.1自体のシェアも少ない•

Regularはそもそも本来のデフォルトのウエイト

font-weightに対する
游ゴシックのウエイト
CSSのfont-weight

游ゴシックのウエイト

Windows
10Windows
8.1

OS X

400
normalRegular○○-500
mediumMedium

○-○

700
bold

Bold

○

○

○

Windows 8.1対応の最終版@font-face {font-family: "MyYuGothicM";
font-weight: normal;
src: local("YuGothic-Medium"), /* Postscript name */local("Yu Gothic Medium"), /* for Chrome */local("YuGothic-Regular"); /* Mediumがない場合 */}@font-face {font-family: "MyYuGothicM";
font-weight: bold;src: local("YuGothic-Bold"), /* Postscript name */local("Yu Gothic");/* for Chrome */}ちなみに

本当はすべてのウエイトに指定した方が安全ではあるけどこうなる@font-face {font-family: "MyYuGothicM";
font-weight: 100;
src: local("YuGothic-Light"),
local("Yu Gothic Light");}@font-face {font-family: "MyYuGothicM";
font-weight: 200;
src: local("YuGothic-Light"),
local("Yu Gothic Light");}@font-face {font-family: "MyYuGothicM";
font-weight: 300;
src: local("YuGothic-Regular"),local("Yu Gothic");}@font-face {font-family: "MyYuGothicM";
font-weight: 400;
src: local("YuGothic-Medium"),
local("Yu Gothic Medium"),local("YuGothic-Regular");}@font-face {font-family: "MyYuGothicM";
font-weight: 500;
src: local("YuGothic-Medium"),
local("Yu Gothic Medium"),local("YuGothic-Regular");}@font-face {font-family: "MyYuGothicM";
font-weight: 600;
src: local("YuGothic-Bold"),
local("Yu Gothic");}@font-face {font-family: "MyYuGothicM";
font-weight: 700;
src: local("YuGothic-Bold"),
local("Yu Gothic");}@font-face {font-family: "MyYuGothicM";
font-weight: 800;
src: local("YuGothic-Bold"),
local("Yu Gothic");}@font-face {font-family: "MyYuGothicM";
font-weight: 900;
src: local("YuGothic-Bold"),
local("Yu Gothic");}

ケーススタディ

MyYuGothicMの定義（共通）@font-face {font-family: "MyYuGothicM";
font-weight: normal;
src: local("YuGothic-Medium"),/* Postscript name */local("Yu Gothic Medium"), /* for Chrome */local("YuGothic-Regular"); /* Mediumがない場合 */}@font-face {font-family: "MyYuGothicM";
font-weight: bold;src: local("YuGothic-Bold"), /* Postscript name */local("Yu Gothic");}/* for Chrome */最新のシステムフォントに寄せる•Windows
•

•OS X
•

•San Francisco + ヒラギノ, ヒラギノ, sans-serif

iOS•

•

游ゴシック, メイリオ, sans-serif

San Francisco + ヒラギノ, ヒラギノ, sans-serif

Andorid•sans-serif

OS Xの2種類のヒラギノ•Hiragino Kaku Gothic ProN（〜 OS X 10.10）•••

W3 or W6の2段階のウエイト

Hiragino Sans（OS X 10.11〜 で追加）•ウエイトがW0 〜 W9の10段階に増えた•

font-family: "Hiragino Sans"; するとnormal時にW4、bold時にW7とこれまでより太くなる

これまで通り、Hiragino Kaku Gothic ProNがよさそうhtml {
font-family:-apple-system, /* OS X, iOS San Francisco */BlinkMacSystemFont, /* OS X, iOS Chrome San Francisco */"Hiragino Kaku Gothic ProN", /* OS X, iOS ヒラギノ */MyYuGothicM, /* Windows 游ゴシック */Meiryo, /* Windows メイリオ */sans-serif;}游ゴシックメインの指定•Windows
•

•OS X
•

•

游ゴシック, San Francisco + ヒラギノ, ヒラギノ, sans-serif

iOS
•

•

游ゴシック, メイリオ, sans-serif

San Francisco + ヒラギノ, ヒラギノ, sans-serif

Andorid•sans-serifhtml {
font-family:
MyYuGothicM, /* Windows 游ゴシック */YuGothic, /* OS X 游ゴシック */-apple-system, /* iOS San Francisco */BlinkMacSystemFont, /* iOS Chrome San Francisco */"Hiragino Kaku Gothic ProN", /* OS X, iOS ヒラギノ */Meiryo, /* Windows メイリオ */sans-serif;}結構長くて大変❌
脱コピペ

どうぞコピペしてご利用ください
大事なのは、理解した上で指定すること

個人的なおすすめ指定•

この先、OSに新しいフォントが増えても対応できる•

未来の新しいOSにも対応できるhtml {font-family: sans-serif;}

まとめ

•

Windowsの游ゴシックにはMediumを使おう•@font-faceでオリジナルのフォントセットをつくろう•@font-faceのlocal()にはChromeのためにフォントファミリー名も併記しよう•

一部のウエイトしかフォントがない状態にならないようlocal()にはフォールバックのフォントも指定しようさらにガチガチのフォント指定をした話は
👇こちらまで👇
http://www.codegrid.net/
月額800円 + 税（30日間無料）