やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > Font > フォントの問題と形式と実装

フォントの問題と形式と実装

Font

　フォントには書字方向、色、サイズ、余白など多数の問題がある。どう解決するのか調べた。

フォントの問題

　HTMLではCSSのwriting-modeプロパティなどにより書字方向を縦に表示できる。これで日本語の文章を読みやすくできる。のだが、じつはフォントがちゃんと対応していないと色々問題が出る。句読点や鉤括弧の位置、三点リーダーや全角ハイフンの向き等。これらはCSSではなくフォントファイルで定義する必要がある。それができるのはOTF形式のみ。

フォント

　フォントは文字の字形である。これを定義するためには多くの知識が必要になる。

形式

形式 要約
TTF 昔からあり最も普及している
OTF 多機能（Unicode,SVG,PNG,文字組版(合字,字体切替,プロポーショナルメトリクス,ペアカーニング,ベースライン指定、COLRv1（カラーフォント）等)）
SVG XMLサブセットによるベクタ画像形式（フォント定義もできるが普及率は低い）
WOFF 上記を圧縮したもの

フォントの作成から使用までの工程

　アイコン化したいサービス等が生まれるたび、次のような工程で追加していく。

作成

  1. SVGエディタで字形を描く
  2. SVG→OTFに変換する
  3. OTF→WOFFに変換する

使用

  1. CSSの@font-faceでWOFFを読み込む
  2. HTMLで使用する

自動化

　手書きするのは字形の描画のみにしたい。あとは自動化したい。

opentype.js

　opentype.jsが使えそう。craft-a-fontを見ると、字形をパス情報として与えたり、UnicodeのコードポイントをセットしてOTF形式データを作っている。saving-a-fontでそのバイナリ配列をファイルに書き出せばOTF形式ファイルが出力できる。

SVG

　SVGのパス情報から読み取るAPIもある。※

　これでSVGファイルを元にしてOTF形式ファイルが作成できそうだ。

WOFF/WOFF2

　こちらによると読込はできそう。でも書込はできないっぽい。

　書込は別のライブラリwoff-toolsを使うことになるか。

他

opentype-es

類似ライブラリ

lib 要約
lib-font フォントの仕様に従ってデータを取得できる
fontkit フォントを読み書きする
pdfkit PDFを読み書きする

WebApp

WebApp 要約
SVGEdit SVGエディタ（GitHub）
SVGOMG SVGを軽量化する
IcoMoon SVGをフォント化(WOFF)する
Aspose WOFF to Base64 WOFFをBase64化する

仕様書