AdobeとGoogleが共同開発した、CJKオープンソースフォント、Source Han Sans (日本語名 源ノ角ゴシックフォント,Google名はNote Sans CJK)を、Webや電書で使い倒すための情報をまとめています。
OTFフォントをEPUBに埋め込むテスト。SourceHanSansJP-Regular.otf のフォントをそのままでEPUBに埋め込み、全体を源ノ角ゴシックで表示されるように指定したものを作成しました。フォントの指定は、@font-faceを使ってcssを次のように記述してあります。
@font-face {
font-family:'SourceHanSansJPR';
font-style:normal;
src: url('SourceHanSansJP-Regular.otf') format('opentype') ;
}
body {
font-family: 'SourceHanSansJPR' ;
}
本来は使用文字だけのサブセットが望ましいのでしょうが、このEPUBはAJ1グリフを全て使っているので、まあほぼフルセット使うことになるでしょう。4.5Mバイトのフォントを埋め込むことになりますが、リーダ的には問題ないようです。
以下でダウンロードまたはブラウザでのプレビューができるようにしてあります。
このEPUBファイルは、Mac/iOS版のiBooks、Mac/iOSのKinoppy、iOS版Kobo、KoboGlo、Android版Kinoppyでの表示を確認しています。
Source Han SansとNoto Sans JPではフォント名が異なり、一部はウエイトの指定も違っています。また、フォントには"PS名"と"フルネーム"があり、ブラウザやOSによって有効な名前が違うため、フォント指定は結構煩雑になります。
各ウエイトにおけるフォント名は以下のようになります。Firefoxではウエイト種別の指定が有効にならないので、font-weightで指定する必要がありますが、すべてのウエイトを指定することができないようです。
| wieght | Source Han Sans OTC (.ttc) |
Source Han Sans 言語別otfのJP |
Noto Sans Japanese | Firefoxでのfont-weight |
|---|---|---|---|---|
| Heavy / Black | SourceHanSans-Heavy '源ノ角ゴシック Heavy' |
SourceHanSansJP-Heavy '源ノ角ゴシック JP Heavy' |
NotoSansJP-Black 'Noto Sans Japanese Black' |
800-900 |
| Bold | SourceHanSans-Bold '源ノ角ゴシック Bold' |
SourceHanSansJP-Bold '源ノ角ゴシック JP Bold' |
NotoSansJP-Bold 'Noto Sans Japanese Bold' |
600-700 |
| Medium | SourceHanSans-Medium '源ノ角ゴシック Medium' |
SourceHanSansJP-Medium '源ノ角ゴシック JP Medium' |
NotoSansJP-Medium 'Noto Sans Japanese Medium' |
500 |
| Regular | SourceHanSans-Regular '源ノ角ゴシック Regular' |
SourceHanSansJP-Regular '源ノ角ゴシック JP Regular' |
NotoSansJP-Regular 'Noto Sans Japanese Regular' |
400 |
| Normal / DemiLight | SourceHanSans-Normal '源ノ角ゴシック Normal' |
SourceHanSansJP-Normal '源ノ角ゴシック JP Normal' |
NotoSansJP-DemiLight 'Noto Sans Japanese DemiLight' |
- |
| Light | SourceHanSans-Light '源ノ角ゴシック Light' |
SourceHanSansJP-Light '源ノ角ゴシック JP Light' |
NotoSansJP-Light 'Noto Sans Japanese Light' |
- |
| ExtraLight / Thin | SourceHanSans-ExtraLight '源ノ角ゴシック ExtraLight' |
SourceHanSansJP-ExtraLight '源ノ角ゴシック JP ExtraLight' |
NotoSansJP-Thin 'Noto Sans Japanese Thin' |
100-300 |
上記の表を総合して、Source Han SansJP とNoto Sans JPどちらが入っていても有効なCSSを作成してみました。
こちらのページで各ウエイトの指定を確認できます。OSXのChrome/Safari/Firefox、WwindowsのChrome/Firefox/IE10で確認しています。
以下のページは、フォントをインストールした環境で見てください。