e-tipsmemo

ごった煮

diagram-js customize 0. font準備

e-tipsmemo.hatenablog.com
diagram-jsからbpmn-jsの再構築した後に、
さて自分のアプリを書く番になると、
PaletteProviderにフォントが必要になるのでその作り方をメモする。

f:id:katakanan:20190606003010p:plain

設定

ドキュメントのプロパティでサイズを変更する。( Shift + Ctrl + D )
f:id:katakanan:20190606003452p:plain

bpmn-jsのフォントのオリジナルだと2048px X 2048pxのsvgを用意しているがサイズは十分大きければどうでもよさそう。
bpmn-font/source/raw at master · bpmn-io/bpmn-font · GitHub
2048px X 2048 pxに設定した。
f:id:katakanan:20190606005626p:plain

描く

整列と配置( Shift + Ctrl + A )を利用してうまいことオブジェクトを配置する。
(基準をページにすればキャンパスにあわせあられる)

真ん中に空洞があるアイコンはオブジェクトを重ねて差分を取るという感じらしい。
Ctrl + A
Ctrl + -
で差分をとって残す。
f:id:katakanan:20190606005704p:plain

アウトライン化?

必要かわからないけど
オリジナルのWebフォントをつくろう その1 | ライオーン
ここに書いてあるのをやっておく。
Shift + Ctrl + G
Ctrl + K

表示→表示モード→アウトライン
で確認できる。
f:id:katakanan:20190606005843p:plain

保存

プレーンSVGで保存する。
f:id:katakanan:20190606005926p:plain

fontello

フォント一個に対して一個のSVGファイルを用意して
それらをすべてFontelloにD & Dする。
f:id:katakanan:20190606010228p:plain

なにかwarningが出るが、この時のプレビューで問題なさそうであれば
ダウンロードするフォントを複数選択して右上からDownloadする。
f:id:katakanan:20190606010326p:plain

フォントの確認

ダウンロードすると
利用するためのCSSとフォントファイルがある。
f:id:katakanan:20190606010854p:plain

VScodeがあればSVG Font Previewを入れるとそのまま見れる。
SVG Font Previewer - Visual Studio Marketplace

f:id:katakanan:20190606012956p:plain
あとは微調整とかデザインセンスとか