前記事が長くなったので2ページに分けました。「その1」の続きです。
ほんでもって読み込んだ書体
下記がGoogleが提供してる日本語書体です。ゴシック体の『Noto Sans CJK JP』と明朝体の『Noto Serif Japanese』。
『Noto Serif Japanese』
前回「その1」で準備した書体を当てはめて並べてみました。微妙な違いを見比べてみてください。
デザインのメモ帳
書体：Noto Serif Japanese Black（font-weight: 900）
デザインのメモ帳
書体：Noto Serif Japanese Blod（font-weight: 700）
デザインのメモ帳
書体：Noto Serif Japanese SemiBold（font-weight: 600）
デザインのメモ帳
書体：Noto Serif Japanese Medium（font-weight: 500）
デザインのメモ帳
書体：Noto Serif Japanese Regular（font-weight: 400）
デザインのメモ帳
書体：Noto Serif Japanese Light（font-weight: 300）
デザインのメモ帳
書体：Noto Serif Japanese ExtraLight（font-weight: 200）
CSS 例
[ NotoSerifCJKjp-Black ]の場合
|
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: ‘Noto Serif Japanese’; font-style: normal; font-weight: 900; src: url(“fonts/NotoSerifCJKjp-Black.woff2”) format(‘woff2’), url(“fonts/NotoSerifCJKjp-Black.woff”) format(‘woff’), url(“fonts/NotoSerifCJKjp-Black.ttf”) format(‘truetype’), url(“fonts/NotoSerifCJKjp-Black.otf”) format(‘opentype’); } |
上記の明朝体には.eotのデータがありません。下記と書式が少し違います。後は対象になるセレクタにfont-familyとfont-weightを設定すればいい。
font-family: ‘Noto Serif Japanese’;
font-weight: 900;
『Noto Sans CJK』
前回「その1」で準備した書体を当てはめて並べてみました。微妙な違いを見比べてみてください。
デザインのメモ帳
書体：Noto Sans CJK JP Black（font-weight: 900）
デザインのメモ帳
書体：Noto Sans CJK JP Blod（font-weight: 700）
デザインのメモ帳
書体：Noto Sans CJK JP Medium（font-weight: 500）
デザインのメモ帳
書体：Noto Sans CJK JP Regular（font-weight: 400）
デザインのメモ帳
書体：Noto Sans CJK JP DimeLight（font-weight: 300）
デザインのメモ帳
書体：Noto Sans CJK JP Light（font-weight: 200）
デザインのメモ帳
書体：Noto Sans CJK JP Light（font-weight: 100）
CSS 例
[ NotoSansCJKjp-Black ]の場合
|
1 2 3 4 5 6 7 8 9 10 11 |
@font-face {<br> font-family: 'NotoSansCJKjp';<br> font-style: normal;<br> font-weight: 900;<br> src: url("fonts/NotoSansCJKjp-Black.eot");<br> src: local('Noto Sans CJK JP Black'),<br> local('NotoSansCJKjp-Black'),<br> url("fonts/NotoSansCJKjp-Black.woff") format('woff'),<br> url("fonts/NotoSansCJKjp-Black.ttf") format('truetype'),<br> url("fonts/NotoSansCJKjp-Black.otf") format('opentype');<br> } |
上記の明朝体には.woff2のデータがありません。後は対象になるセレクタにfont-familyとfont-weightを設定すればいい。
font-family: ‘NotoSansCJKjp’;
font-weight: 900;