次のように画像 (raster image) 化した文字画像は、 テキスト選択できないなど批判されることが多いが 特殊なフォントを使いたい場合など使用されることが多い。

ラスター画像化した文字画像の例

web font

最も理想的な解決策は web font を用意することで、 ソースも無駄がない。 しかしフォントサイズが大きくなるという日本語特有の事情や、 ライセンスの問題から一筋縄ではない。 だがメジャーなフォントベンダーのフォントなら、その問題をまとめて TypeSquareや TypeKit などのサービスで解決もらえるので、普通はこれが良い。

やくもたつ
いづもやへがき
つまごみに
やへがきつくる
そのやへがきを
Woffでの表示例（ライブビュー）

pdf.js で透明テキスト

ところで PDF への埋め込みは許されているというのはありがち。 そこで pdf.js の威力を使ってレンダリングしてしまえば、 フォントの字形は canvas 要素、テキスト選択できない問題は 透明テキストで解決できる。 しかし、無理矢理感が半端ないし、pdf.js 自体が結構重い。

pdf.js での表示例（ライブビュー）

透明テキストを含んだベクトル画像

pdf.js のレンダリング結果を模擬するものの、 レンダリング結果はラスターではなくベクトルとする。 すなわちアウトライン化した svg 画像内に透明テキストを入れこむ。

svg化した文字画像の例

感想

日本語のフォントは色々と大変だと思いました（小並感

参考文献

  • github:mozilla/pdf.js
  • 使用している極太明朝はMOJもじくみかなSH版
  • 例文として使用した文は、最古の和歌と伝えられる「八雲立つ／出雲八重垣／妻籠みに／八重垣作る／その八重垣を」