📦

OG画像の約物を詰める - YakuHanJP v4

2023/09/12に公開

5年ぶりに約物を詰めるフォント「YakuHanJP」をメジャーアップデートしました!リリースしたv4の大目的はOG画像のテキストのスカスカ感を無くすことでした。

OG画像生成には font-feature-settings やCSSによるフォントのフォールバックが使えない(2023年9月12日時点)ので、カッコや感嘆符が多いと余白が悪目立ちしてしまいます。

そこで、Noto Sans JPにYakuHanJPをマージしたフォントを作成しました。これを使用するとOG画像のテキストに含まれる約物が自動的に詰まります。

使い方

リポジトリのマージディレクトリから必要なウェイトのフォントをダウンロードして生成プログラムで使っているフォントと差し替えるだけです。ゴシック体9ウェイトに加え、明朝体と丸ゴシックも作りました。すべて「カッコのみ」バージョンもあります。

https://github.com/qrac/yakuhanjp/tree/main/packages/merged

実装例

satori@resvg/resvg-js を使用したOG画像生成の実装例はPlaygroundに。Viteの開発モードで擬似的にサーバーサイドの動きを再現しました。

https://github.com/qrac/yakuhanjp/blob/main/playground/ogp/src/ogp.ts

Discussion