前記事が長くなったので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 ]の場合
@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 ]の場合
@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;