├── fonts ├── a ├── NotoSansCJKjp-Bold.eot ├── NotoSansCJKjp-Bold.ttf ├── NotoSansCJKjp-Thin.eot ├── NotoSansCJKjp-Thin.ttf ├── NotoSansCJKjp-Black.eot ├── NotoSansCJKjp-Black.ttf ├── NotoSansCJKjp-Black.woff ├── NotoSansCJKjp-Bold.woff ├── NotoSansCJKjp-Bold.woff2 ├── NotoSansCJKjp-Light.eot ├── NotoSansCJKjp-Light.ttf ├── NotoSansCJKjp-Light.woff ├── NotoSansCJKjp-Medium.eot ├── NotoSansCJKjp-Medium.ttf ├── NotoSansCJKjp-Thin.woff ├── NotoSansCJKjp-Thin.woff2 ├── NotoSansCJKjp-Black.woff2 ├── NotoSansCJKjp-DemiLight.eot ├── NotoSansCJKjp-DemiLight.ttf ├── NotoSansCJKjp-Light.woff2 ├── NotoSansCJKjp-Medium.woff ├── NotoSansCJKjp-Medium.woff2 ├── NotoSansCJKjp-Regular.eot ├── NotoSansCJKjp-Regular.ttf ├── NotoSansCJKjp-Regular.woff ├── NotoSansCJKjp-Regular.woff2 ├── NotoSansCJKjp-DemiLight.woff └── NotoSansCJKjp-DemiLight.woff2 ├── README.md └── css └── font.css /fonts/a: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Bold.eot -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Bold.ttf -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Thin.eot -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Thin.ttf -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Black.eot -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Black.ttf -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Black.woff -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Bold.woff -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Bold.woff2 -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Light.eot -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Light.ttf -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Light.woff -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Medium.eot -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Medium.ttf -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Thin.woff -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Thin.woff2 -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Black.woff2 -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-DemiLight.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-DemiLight.eot -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-DemiLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-DemiLight.ttf -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Light.woff2 -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Medium.woff -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Medium.woff2 -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Regular.eot -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Regular.ttf -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Regular.woff -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-Regular.woff2 -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-DemiLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-DemiLight.woff -------------------------------------------------------------------------------- /fonts/NotoSansCJKjp-DemiLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minoryorg/Noto-Sans-CJK-JP/HEAD/fonts/NotoSansCJKjp-DemiLight.woff2 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Noto Sans CJK JP（Japanese） 2 | サブセット化済みの「Noto Sans CJK JP」（日本語フォント）のCSS付きWebフォント 3 | [サンプルはこちら](https://minoryorg.github.io/Noto-Sans-CJK-JP/) 4 | 5 | ## Google Webフォントのダウンロード 6 | [http://www.google.com/get/noto/#/family/noto-sans-jpan](http://www.google.com/get/noto/#/family/noto-sans-jpan) 7 | Google先生から日本語フォントをダウンロード。 8 | ちなみに、Noto Sans「Noto」とは、 9 | > コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)、通称"豆腐"が表示されることが多いが、すべての言語に対応したフォントを開発することで"豆腐"が現れることがなくなるようにという意味を込めてNoto(no more tofu)という名称が付けられた。 10 | 11 | らしい...。 12 | 13 | ## WOFFコンバータ 14 | [http://opentype.jp/woffconv.htm](http://opentype.jp/woffconv.htm) 15 | 様々なブラウザに対応するため4種類のフォーマットのファイルを作成 16 | * eot 17 | * ttf 18 | * woff2 19 | * woff 20 | 21 | ### 各ブラウザの対応フォーマット 22 | |フォーマット|Chrome|Firefox|Opera|Safari|IE/Edge| 23 | |:---:|:---:|:---:|:---:|:---:|:---:| 24 | |TTF/OTF|4|3.5|10|3.1|9[1]| 25 | |WOFF|5|3.6|11.10|5.1|9| 26 | |WOFF2|36|39|23|10|Notsupported| 27 | |EOT|Notsupported|Notsupported|Notsupported|Notsupported|6| 28 | 29 | ## サブセット化 30 | [http://opentype.jp/subsetfontmk.htm](http://opentype.jp/subsetfontmk.htm) 31 | サブセットフォントメーカーを使用して、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化し、ファイルサイズを削減します。 32 | 約16MBあるファイルサイズが700KBにまで減少します。 33 | 34 | ## CSSの書き方 35 | ```c 36 | @font-face { 37 | font-family: 'Noto Sans Japanese'; 38 | font-style: normal; 39 | font-weight: 100; 40 | src: url('../fonts/NotoSansCJKjp-Thin.woff2') format('woff2'), 41 | url('../fonts/NotoSansCJKjp-Thin.woff') format('woff'), 42 | url('../fonts/NotoSansCJKjp-Thin.ttf') format('truetype'), 43 | url('../fonts/NotoSansCJKjp-Thin.eot') format('embedded-opentype'); 44 | ``` 45 | * font-family：CSSで指定する名前（短い方がスマート） 46 | * font-style：CSSで指定するスタイル（normal固定） 47 | * font-weight：CSSで指定する文字の太さ（100～900） 48 | * src：フォントファイルのディレクトリパス（各ブラウザに対応） 49 | 50 | [サンプルはこちら](https://minoryorg.github.io/Noto-Sans-CJK-JP/) 51 | -------------------------------------------------------------------------------- /css/font.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @font-face { 4 | font-family: 'Noto Sans Japanese'; 5 | font-style: normal; 6 | font-weight: 100; 7 | src: url('../fonts/NotoSansCJKjp-Thin.woff2') format('woff2'), 8 | url('../fonts/NotoSansCJKjp-Thin.woff') format('woff'), 9 | url('../fonts/NotoSansCJKjp-Thin.ttf') format('truetype'), 10 | url('../fonts/NotoSansCJKjp-Thin.eot') format('embedded-opentype'); 11 | } 12 | @font-face { 13 | font-family: 'Noto Sans Japanese'; 14 | font-style: normal; 15 | font-weight: 200; 16 | src: url('../fonts/NotoSansCJKjp-Light.woff2') format('woff2'), 17 | url('../fonts/NotoSansCJKjp-Light.woff') format('woff'), 18 | url('../fonts/NotoSansCJKjp-Light.ttf') format('truetype'), 19 | url('../fonts/NotoSansCJKjp-Light.eot') format('embedded-opentype'); 20 | } 21 | @font-face { 22 | font-family: 'Noto Sans Japanese'; 23 | font-style: normal; 24 | font-weight: 300; 25 | src: url('../fonts/NotoSansCJKjp-DemiLight.woff2') format('woff2'), 26 | url('../fonts/NotoSansCJKjp-DemiLight.woff') format('woff'), 27 | url('../fonts/NotoSansCJKjp-DemiLight.ttf') format('truetype'), 28 | url('../fonts/NotoSansCJKjp-DemiLight.eot') format('embedded-opentype'); 29 | } 30 | @font-face { 31 | font-family: 'Noto Sans Japanese'; 32 | font-style: normal; 33 | font-weight: 400; 34 | src: url('../fonts/NotoSansCJKjp-Regular.woff2') format('woff2'), 35 | url('../fonts/NotoSansCJKjp-Regular.woff') format('woff'), 36 | url('../fonts/NotoSansCJKjp-Regular.ttf') format('truetype'), 37 | url('../fonts/NotoSansCJKjp-Regular.eot') format('embedded-opentype'); 38 | } 39 | @font-face { 40 | font-family: 'Noto Sans Japanese'; 41 | font-style: normal; 42 | font-weight: 500; 43 | src: url('../fonts/NotoSansCJKjp-Medium.woff2') format('woff2'), 44 | url('../fonts/NotoSansCJKjp-Medium.woff') format('woff'), 45 | url('../fonts/NotoSansCJKjp-Medium.ttf') format('truetype'), 46 | url('../fonts/NotoSansCJKjp-Medium.eot') format('embedded-opentype'); 47 | } 48 | @font-face { 49 | font-family: 'Noto Sans Japanese'; 50 | font-style: normal; 51 | font-weight: 700; 52 | src: url('../fonts/NotoSansCJKjp-Bold.woff2') format('woff2'), 53 | url('../fonts/NotoSansCJKjp-Bold.woff') format('woff'), 54 | url('../fonts/NotoSansCJKjp-Bold.ttf') format('truetype'), 55 | url('../fonts/NotoSansCJKjp-Bold.eot') format('embedded-opentype'); 56 | } 57 | @font-face { 58 | font-family: 'Noto Sans Japanese'; 59 | font-style: normal; 60 | font-weight: 900; 61 | src: url('../fonts/NotoSansCJKjp-Black.woff2') format('woff2'), 62 | url('../fonts/NotoSansCJKjp-Black.woff') format('woff'), 63 | url('../fonts/NotoSansCJKjp-Black.ttf') format('truetype'), 64 | url('../fonts/NotoSansCJKjp-Black.eot') format('embedded-opentype'); 65 | } 66 | --------------------------------------------------------------------------------