search
LoginSignup
31

More than 5 years have passed since last update.

posted at

updated at

Noto Serif CJK(源ノ明朝)の font-feature-settings:palt 対応サブセットフォントを作る

はじめに

2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK(源ノ明朝)」が発表されました。

さっそくサイトでも使いたいところですが、そのままでは1ウェイトあたり約23MBもあるのでユーザーにかなりの負担を強いてしまいます。そこでサブセットを作ることにしました。

ここで言う「サブセット」とは必要な文字だけを抜き出したフォントファイルのことです。

サブセットフォントメーカーは使わない

以前は武蔵システムさんの「サブセットフォントメーカー」という大変素晴らしいツールを使っていましたが、OpenTypeFontの情報をごっそり削ってしまいます。そのため CSS の font-feature-settings:palt; を用いた字詰めが出来ないのです。

notoserif.png

上の図は font-feature-settings:palt; を指定した状態です。サブセットフォントメーカーで作った Noto Serifは等幅として扱われているのがわかります。

pyftsubset を使えば大丈夫

Python の fontTools に含まれる pyftsubset を使えば解決できるようです。

基本的には下記の記事が詳しいです。というかこの記事は下記の記事のコピペ+メモみたいなものですw
≫日本語フォントのOpenType機能を維持するサブセット化

出力は WOFF/WOFF2形式のみ

以前はIE対策として EOT形式を使っていましたが、IE9からは WOFF に対応したので WOFF/WOFF2 のみ出力します。Android4系に対応するなら TrueType形式が必要ですが……もういいですよね?

この記事は OS X を対象としています。

準備編

「すでに pip 使えるぜー」という人は「実践編」に進んで下さい。

Python インストール

OS X には標準で Python がインストールされていますが、EL Capitan以降は後述するツールをインストールする時に権限のエラーが発生します。ですので Homebrew を使ってユーザー領域に別の Python をインストールします。

Homebrew をアップデートした後に Python をインストールします。アップデートはちょっと時間がかかります。

$ brew update
$ brew install python

Python インストールの確認

まずは初期状態の Python の場所です。

$ which python
/usr/bin/python

Homebrew を使ってインストールすると下記の場所になります。

$ which python
/usr/local/bin/python

pip のアップデート

Homebrew でインストールした Python には標準で pip が入っているので、アップデートだけでOKです。

$ pip install --upgrade pip

参考:macOS SierraでPythonのパッケージマネージャ「pip」でインストールできない時の対処法

実践編

fontTools のインストール

fontTools は Python を使ってフォントをいろいろやっちゃおうぜーというツールらしいです(よく知らない)。
pip を使ってインストールします。

https://github.com/fonttools/fonttools

$ pip install fonttools
Successfully installed fonttools-3.9.2

Brotli のインストール

WOFF2形式を出力するために必要なのでインストールします。圧縮関係なライブラリ?

$ git clone https://github.com/google/brotli
$ cd brotli
$ python setup.py install

Noto Serif CJK JP をダウンロード

ダウンロードページに行きます。検索ボックスに Noto Serif CJK JP と入力して絞り込みます。あとはダウンロード!

サブセットフォント作成!

fontTools に含まれている pyftsubset というツールを使ってサブセット化>WOFF変換をまとめて行います。

$ pyftsubset NotoSerifCJKjp-Regular.otf --text-file=subset.txt --layout-features='*' --flavor=woff --output-file=NotoSerifCJKjp-Regular-sub.woff

--flavor=woff2 にして、出力ファイル名も「.woff2」にして WOFF2形式を出力します。

$ pyftsubset NotoSerifCJKjp-Regular.otf --text-file=subset.txt --layout-features='*' --flavor=woff2 --output-file=NotoSerifCJKjp-Regular-sub.woff2

ファイルサイズを比較してみました。オリジナルが約23MB。サブセットが約2MBです(それでも大きいと言われそうですが)。

-rw-r--r--   1 dada  staff   2304772  4 14 14:14 NotoSerifCJKjp-Regular-sub.woff
-rw-r--r--   1 dada  staff   1971056  4 14 14:21 NotoSerifCJKjp-Regular-sub.woff2
-rw-r-----@  1 dada  staff  23607780  4  3 13:40 NotoSerifCJKjp-Regular.otf

notoserif_.png

今度は字詰めが有効になりました!
最初の例と太さが違うのは、最初 SemiBold で試して、次に Regular を試したためです。

解説編

サブセットに含める文字は第一水準+α

--text-file=subset.txt でサブセットに含める文字をテキストファイルで指定します。自分の場合は第一水準+下記の文字を入れています。

櫻燿璐廣會慄蘆跋扈殲憑吼祀侑澤翔栫閻

以前作ったサイトで必要だったの文字です。なんとなく作品内容が見えてきますね。

参考:Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順

font-feature-settings を個別に指定できる

--layout-features-='mark','mkmk' のように CSS の font-feature-settings で使うものを指定できます。 特に除外する理由もないので * を指定しています。

容量は小さくなるかもしれませんが試していません。

CSSファイルを作る

必要なウェイトを変換したら CSSファイルを作ります。

NotoSerifCJKjp.css
@font-face {
    font-family: 'NotoSerifCJKjp';
    font-style: normal;
    font-weight: 400;
    src:
        url('./NotoSerifCJKjp-Regular-sub.woff2') format('woff2'),
        url('./NotoSerifCJKjp-Regular-sub.woff') format('woff');
}
@font-face {
    font-family: 'NotoSerifCJKjp';
    font-style: normal;
    font-weight: 600;
    src:
        url('./NotoSerifCJKjp-SemiBold-sub.woff2') format('woff2'),
        url('./NotoSerifCJKjp-SemiBold-sub.woff') format('woff');
}

使う時はこんな感じに。

font-family: NotoSerifCJKjp, serif;
font-weit: 600;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
31