📦
OG画像の約物を詰める - YakuHanJP v4
5年ぶりに約物を詰めるフォント「YakuHanJP」をメジャーアップデートしました!リリースしたv4の大目的はOG画像のテキストのスカスカ感を無くすことでした。
OG画像生成には font-feature-settings
やCSSによるフォントのフォールバックが使えない(2023年9月12日時点)ので、カッコや感嘆符が多いと余白が悪目立ちしてしまいます。
そこで、Noto Sans JPにYakuHanJPをマージしたフォントを作成しました。これを使用するとOG画像のテキストに含まれる約物が自動的に詰まります。
使い方
リポジトリのマージディレクトリから必要なウェイトのフォントをダウンロードして生成プログラムで使っているフォントと差し替えるだけです。ゴシック体9ウェイトに加え、明朝体と丸ゴシックも作りました。すべて「カッコのみ」バージョンもあります。
実装例
satori
と @resvg/resvg-js
を使用したOG画像生成の実装例はPlaygroundに。Viteの開発モードで擬似的にサーバーサイドの動きを再現しました。
Discussion