🅰️
fontToolsでウェブフォント
fontTools.subsetでウェブフォント化して、CSSでサブセットを指定しています。
fontTools.subset
fontToolsにはpyftsubset
コマンドもありますが、スクリプトを書きました。
from fontTools.subset import Options, load_font, Subsetter, save_font
subset_options = Options(**_subset_options)
font = load_font("path/to/font_file", subset_options)
subsetter = Subsetter(subset_options)
subsetter.subset(font)
save_font(font, "path/to/outfile", subset_options)
Options
サブセットの内容が指定できます。
ここでグリフも指定できますが、私はSubsetter.populate
を使っています。
subset_options = Options(
flavor="woff2",
with_zopfli=True,
layout_features=["*"],
hinting=False,
drop_tables=[],
name_IDs=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],
)
flavor
、with_zopfli
ウェブフォントの形式や、変換(圧縮)方法が指定できます。
私は Google Zopfli でWOFF2に変換しています。
flavor
を指定しなければ、単にサブセット化します。いわゆるウェブフォント形式(WOFF、WOFF2)には変換されません。
layout_features
保持する OpenType Layout features が指定できます。
私はすべて保持しています。
hinting
TrueType hinting の保持について指定できます。
私は保持せず、除去しています。
drop_tables
削除する font Tables が指定できます。
私は削除せず、すべて保持しています。
name_IDs
保持する name IDs が指定できます。
load_font
ファイルからフォントを読み込むことができます。フォントはfontTools.ttLib.ttFont.TTFont
オブジェクトとして扱われます。
Subsetter
フォントオブジェクトをサブセット化することができます。
私はfontTools.ttLib.ttFont.TTFont.getBestCmap
などですべてのグリフを取得しておいて、分割しています。
subsetter = Subsetter(subset_options)
codepoints = []
for codepoint in font.getBestCmap().keys():
codepoints.append(codepoint)
from copy import deepcopy
n = 47
while 0 < len(codepoints):
subset_unicode = codepoints[0:n]
codepoints[0:n] = []
subsetter_copy = deepcopy(subsetter)
subsetter_copy.populate(unicode=subset_unicode)
font_copy = deepcopy(font)
subsetter_copy.subset(font_copy)
populate
グリフが指定できます。
私はUnicodeコードポイントで指定しています。
subset
サブセット化できます。
save_font
フォントが保存できます。
unicode-range
使う文字の範囲が指定できます。これにより、指定した文字が使われるときに(必要なときにだけ)フォントが読み込まれるようになります。
/* ASCIIが使われるときにだけ読み込まれるフォント */
@font-face {
font-family: "My Font";
font-weight: 100 900;
src: url(MyFont.1.woff2) format("woff2");
unicode-range: U+20-7f;
}
/* unicode-range未指定と大差ないフォント */
@font-face {
font-family: "My Font";
font-weight: 100 900;
src: url(MyFont.2.woff2) format("woff2");
unicode-range: U+0-1f0000;
}
Discussion