21
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

(M+とか)ブラウザ, VSCodeで表示が汚くなるフォントを救え!【シェルスクで自動化編】

Last updated at Posted at 2019-07-14

オープンソースの日本語ゴシック体フォント M+ OUTLINE FONTS1 をWindows上のブラウザ(Firefox, Chromium)のフォントに設定すると、
image.png
__ガビガビになっている。一部のフォントで発生するこのクソの原因は__フォントヒンティング2で、ヒンティング情報をフォントファイルから消せばガビガビは消える
image.png


これをFontforgeを使って手作業でやったのが前回。(必要なことは今話したので、読まなくてもいい)
[【Fontforge】ブラウザやElectron系ソフトで表示される文字がガビガビになってる時の解決法と、ヒンティングについて感じたこと]
(https://qiita.com/mmns/items/7d268134f5915f222599)

今回はこれを自動化する。

使うもの

  • bashかなんか
    • 自分はWSLのUbuntu 18.04でやっているが、シェルスクリプトが動けば仮想マシンでもMacbookでもUserLAndでもいいと思う。たぶん
  • ttfautohint(GitHub)
    • ヒンティングを自動化するソフト。日本語フォントへの対応はしてなさそうだが、そんなことよりCLIからヒンティング情報の削除(dehint)ができることがディ・モールト(非常に)良い。
    • Windowsとか向けにGUIバージョンもある。
  • WOFF2(GitHub)
    • WOFF2というのはもちろんウェブフォント向けフォーマットのことだが、Googleが同じ名前でWOFF2への変換ツールをGitHubに公開している。紛らわしい。

シェルスクリプト

woff2 と ttfautohint を入れる

Debian/Ubuntu, Fedora/CentOS, FreeBSD(たぶん), Homebrew にはパッケージの形でおいてあるので、おのおのパッケージマネージャーから入れるとよい。Archはttfautohintが、その他ディストロには両方ないので自力でビルドが必要。

GitHubから引いてビルドする場合の手順。

ttfautohintとwoff2を引っ張ってきて適当な場所(ここでは$HOME)でビルドするだけ。

install.sh
#! /bin/bash

cd ~/
git clone https://github.com/source-foundry/ttfautohint-build.git ttfautohint-b
cd ttfautohint-b
make

cd ~/
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all
sudo apt install ttfautohint woff2

dehint してみる

インストールされたら、TTFファイルのあるディレクトリでこいつを実行する。
./unhint.shで実行すると、*.ttfに合致するファイルを全部処理する。
./unhint.sh mplusで実行すると、mplus*.ttfに合致するファイルを全部処理する。

ビルドしてる場合はttfautohint, woff2を適切なパスに("$HOME/ttfautohint-build/local/bin/ttfautohint", "$HOME/woff2/woff2_compress" "unhinted-${file}"とか)置き換える。

unhint.sh
#! /bin/bash
for file in $1*.ttf
do
    ttfautohint -dF " Unhinted" "$file" "unhinted-${file}"
    woff2_compress "unhinted-${file}"
done

冥土の土産として解説すると、ttfautohint-d(--dehint)がヒンティング削除で, -F(-family-suffix)でフォント名に Unhintedを追加する、という感じ。woff2はwoff2_compress, woff2_decompress, woff2_infoとコマンドが3つに別れているが、今回は圧縮なのでwoff2_compress

結の果

image.png
「シェルスクリプト書いてたんだからlsで表示しろよ」という意見は置いといて、ttfとwoffが無事出力されました。めでたしめでたし。しっかし、WOFFにしても結構デカいな…

  1. M+には1c, 1p, 2c, 2p(各7ウェイト)と、1m, 1mn, 2m(各5ウェイト)、合わせて43のフォントファイルが存在するが、今はそんなことはどうでもいい。

  2. 小さいサイズでも字形が崩れたりしないようにする技術。

21
16
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?