Zenn
Closed5

カスタムフォントの設定値を操作したい

Flutter
Xcode
Daigo WakabayashiDaigo Wakabayashi

解決したいこと

  • Flutter アプリでカスタムフォントを使っているが、デフォルトの行間より広くなってしまう
  • アプリは多言語対応しており、日本語 → フォントA・英語 → フォントB のように別のフォントを適用しているため、切替時にレイアウトに差異が生まれてしまっている

勘所

  • フォントファイルをいじって修正できないか
  • Theme で「日本語設定時には行間を狭める」みたいな記述で解決できないか
Daigo WakabayashiDaigo Wakabayashi

CLI ツールを使って otf → XML に変換し、内容を編集する

  • Font Tools for Xcode をダウンロードすると、ftxdumperfuser という CLI ツールが利用可能になる
  • ftxdumperfuser -h でヘルプが出てくれば OK
  • もしフォントファイルが otf 以外の場合、こちら を使って otf に変換しておく
% ftxdumperfuser -h
ftxdumperfuser build 359, FontToolbox.framework build 353
Usage:  ftxdumperfuser [-t table] [-acFgGhHiIklLmnNpuvVxX] [-A a|b|d|f|k] [-B size] [-C cmapSpecifier] [-f font] [-d datafile] [-o outputfile] [-w desiredWidth] [--cache cache-file] fontfile
Options:
	-a (--all) Dump all of the fonts within a file; overrides the -f option.  Warning:  The dumped results will probably *not* be valid XML

~~~~~~~~~~~~~~~ 中略 ~~~~~~~~~~~~~~~ 

NOTE:  The tool allows dumps from multiple font files to a single text
	file, but it does *not* allow fuses from a single text file to
	multiple font files.  The text input file for a fuse operation *must*
	consist of the XML source for a single table.
  • 編集したいフォントファイルを特定フォルダに置く
  • 該当フォルダで以下コマンドを叩くと、XML に書き出してくれる
% ftxdumperfuser --table hhea --auto d <フォントファイル名>.otf
  • 書き出された XML ファイルの ascender・descender・lineGap を編集する

https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html

Daigo WakabayashiDaigo Wakabayashi

XML ファイルの編集・otf に合成

  • こちらを参考に、ascenderとlineGapの合計が 1000 になるように修正
xml
 <hheaTable
	versionMajor="1"
	versionMinor="0"
	ascender="880"
	descender="-120"
-	lineGap="1000"
+ 	lineGap="120"
	advanceWidthMax="1000"
  • 修正した XML ファイルを、以下のコマンドで otf ファイルに合成する
% ftxdumperfuser --table hhea --auto f <フォントファイル>.otf

行間が修正できた。Close

このスクラップは2022/09/04にクローズされました