Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@AumyF

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

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


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

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

使うもの

  • 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. 小さいサイズでも字形が崩れたりしないようにする技術。 

14
Help us understand the problem. What is going on with this article?
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
AumyF
おーみーと呼んでください。職業は高校生です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?