OSに標準搭載されている和文フォントを使う(HTML/CSS)
前書き
Webフォントを使えば、どのOSに対しても同じフォントを使用することが出来ます。
ただし、フォントデータの容量が大きくなると、ページの表示速度が遅くなる可能性があります。
和文フォントは文字数が多い為、容量に注意が必要です。
Webフォントは日々改良されていますが、OSに初めから搭載されているフォントを使う事が出来れば、それに越したことはありません。
Webページに使えそうな和文フォントを掲載しています。
目次
- Windows
- BIZ UDゴシック
- BIZ UD明朝
- UDデジタル教科書体
- macOS
- ヒラギノ角ゴシック
- ヒラギノ丸ゴシック
- ヒラギノ明朝
- Windows、macOS共通
- 游ゴシック
- 游明朝
- メイリオ
- その他
- 参考
Windows
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "BIZ UDGothic"; //等幅
font-family: "BIZ UDPGothic"; //プロポーショナル
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "BIZ UDMincho"; //等幅
font-family: "BIZ UDPMincho"; //プロポーショナル
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "UD Digi Kyokasho N-B"; //等幅 ボールド
font-family: "UD Digi Kyokasho N-R"; //等幅 レギュラー
font-family: "UD Digi Kyokasho NP-B"; //プロポーショナル(英数) ボールド
font-family: "UD Digi Kyokasho NP-R"; //プロポーショナル(英数) レギュラー
font-family: "UD Digi Kyokasho NK-B"; //プロポーショナル(かな・英数) ボールド
font-family: "UD Digi Kyokasho NK-R"; //プロポーショナル(かな・英数) レギュラー
//font-weight: bold; の時だけに、ボールドのフォントを適用する場合↓
@font-face {
font-family: "myFontKyokasho";
src: local("UD Digi Kyokasho NK-R");
}
@font-face {
font-family: "myFontKyokasho";
src: local("UD Digi Kyokasho NK-B");
font-weight: bold;
}
font-family: myFontKyokasho, "UD Digi Kyokasho NK-R";
macOS
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans";
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro";
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro";
Windows、macOS共通
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "Yu Gothic", YuGothic; //調整方法はググって下さい
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: "Yu Mincho", YuMincho; //調整方法はググって下さい
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
0123456789 <>&!#@{}"'
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-family: Meiryo;
その他
参考
【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例