Help us understand the problem. What is going on with this article?

【Fontforge】ブラウザやElectron系ソフトで表示される文字がガビガビになってる時の解決法と、ヒンティングについて感じたこと

19/07/14追記: Fontforgeでの手作業をやめ、自動化しました。
image.png
image.png
↑M+ 1c 1.063a。上はVisual Studio CodeのMarkdownプレビュー, 下はFirefoxで表示。

このガビガビは、FirefoxでもChromeでも、M+や源真ゴシックを使っているならば誰にでも降りかかる災厄であり、クソである。
もちろん、M+をFirefox, Chromium系ソフト1で表示した結果はクソだが、M+, Firefox, Chromiumを制作, 開発された方々は断じてクソではないし、むしろ無限大の感謝を贈りたいと思っている。2

なお、macOSではヒンティング情報はスルーされるのでmacOSはTrueTypeのヒンティング情報を使わず(コメントより追記)、Unhinted M+を使う必要はない。たぶんLinuxも。

前回までのあらすじ

この記事を書く前に同じ問題にクソみたいなアプローチで対処する記事を投稿し、フォント側のヒンティングの問題とのコメントを頂いた。
コメントしてくださったscivolaさん、ありがとうございます。

つまり、ヒンティングの無効化(フォントのヒンティング情報の削除)をすれば全ては解決し、世界は救われるのだ。
…という予想を立てて実際成功したので、その記録をいま残している。

結の果

image.png
image.png
なんということでしょう!小麦粉をまぶしたようなレンダリングが、Fontforgeの手によって見事に生まれ変わったではありませんか!

Webフォントを見て試せるよう、GitHub Pagesにも上げているのでお試しあれ。
TTFのダウンロードもこちらから。

用意するもの

  • Fontforge
    • オープンソースのフォント編集ソフト。
    • 見た目がやや古臭いような気もするが、機能は十分。
  • 適当なフォント
    • ライセンスを確認した上で選ぶ。M+(M+ Font License)の場合は大丈夫のはず。
  • 適切に整えられた自律神経

手順

image.png
Fontforgeを起動するとファイルを開くダイアログが出てくるので、フォントファイルを開く。

image.png
すべて選択。なぜかは知らないがCtrl+Aが効かなかった。

image.png
Remove Instr Tables, ヒントを削除, ヒント命令を削除。自分でもよくわかっていないが、ヒントと書かれたメニューの中にあるわけだしヒンティングに関わるなんかの削除であることは間違いない(はず)。

これでヒンティングの削除は終わりだが、フォントのメタデータ(的なもの)が変更されておらず、元フォントと共存できない。変更しないならそれはそれでいい。

エレメント→フォント情報を開く。
image.png
フォント名, ファミリー名, 表示用の名前, バージョンを編集。
※おま環くさいが直接入力しようとするとかな入力、それも半角カナで出てきたのでメモ帳からコピペで入力した。
よくわからんがFontforgeがいい感じに生成してくれるっぽいとポップアップに書いてあったので、sfnt Revisionは空白にしておいた。
これだけの編集なので著作権がどうとか書く必要もないかと思って、著作権はM+のものをそのまま使っている。
こんなになった。
image.png

image.png
TTF名の項目にあるいろいろを編集。M+のままだと問題が起きそうなあたりをなんとなーく重点的に。

image.png
編集してOKするとこんなのが出てくるが、Adobeは現在XUID/UniqueIDを不要だと考えています という文言がフォント情報のダイアログの中にあったので変更で問題ないだろう。

あとはファイル→フォントを出力で出力すればOK。OSにインストールならTTF、WebフォントにするならWOFF2がよさげ。エラーは握り潰せ。

おわりに:ヒンティングについて感じたこと

image.png
ヒンティングは、小さいサイズで描画するときに、潰れたり, 崩れたりしないようにする技術ですが、今回ヒンティングを無効にしても、12pxの上図では特段崩れた様子はありません。3
メイリオ - 蕎麦処 ぱろある亭
こちらは2007年2月の、メイリオについてのブログですが、

解像度が十分高くなり結局ヒンティングなど必要なくなる日がいつか来る。もしかしたら Vista の寿命のうちに。
実は Mac OS X は TrueType のヒンティング情報を使わず、アウトラインに表された形をそのまま画面に映し出す。

とあります。
この記事が書かれて12年が経過し、Windows Vistaは寿命を終え、ディスプレイの解像度が上がり、
もはやフォントヒンティングは不要なのではないかと思います。
みなさんはどう思われますか?

あと、もっとよい方法があったらご教授ください。すべてのM+ユーザーが救われます


  1. Chromium, Google Chrome, Vivaldi, Operaなどと、Chromium→Electronの流れでVisual Studio Code, Atomなどにまで波及している 

  2. 全く無関係の話なので読まなくていいが、明確な悪役がおらず、登場人物たちのトラブルが積み重なって大きな問題になるというのは、俺のお気に入りである2018年のポケモン映画「みんなの物語」に通ずるところ。こないだ(この記事を書いた2日前ぐらい)の地上波放送を見損ねたのを未だに引きずっている 

  3. 崩れていない、というより小さすぎて違いが出るほどの余裕もない、というのが正確か。そしてブラウザの開発者ツール(F12)で調整していただけるとわかるが、最近のディスプレイでは物理的に小さすぎて読みづらい。 

mmns
JK(Jōhōkē Kōkōsē)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした