Alpine Linux で日本語が文字化けしないようにNotoSansCJKjpを入れる

問題

Alpine上のブラウザでキャプチャとか取る時に、日本語フォント部分が文字化けしちゃっている。こんな感じで。

環境

/ # cat /etc/os-release 
NAME="Alpine Linux"
ID=alpine
VERSION_ID=3.6.0
PRETTY_NAME="Alpine Linux v3.6"
HOME_URL="http://alpinelinux.org"
BUG_REPORT_URL="http://bugs.alpinelinux.org"

解決

デフォルトで日本語フォントが何も無いようなので、何か入れる必要があります。

とりあえずこれを流しといたら直るかもしれません。

apk update \
  && apk add --no-cache curl fontconfig \
  && curl -O https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip \
  && mkdir -p /usr/share/fonts/NotoSansCJKjp \
  && unzip NotoSansCJKjp-hinted.zip -d /usr/share/fonts/NotoSansCJKjp/ \
  && rm NotoSansCJKjp-hinted.zip \
  && fc-cache -fv \

fontconfigというパッケージを入れるとfc-listやfc-cacheといったコマンドが使えるようになります。あまり良くわかってないですが、こんなことができます。

• fc-list 利用可能なフォント一覧を表示
• fc-cache -fv 利用可能なフォントを更新

フォントは/usr/share/fonts/<好きなディレクトリ名>/...な感じで置いておけば大丈夫そうです。今は、/usr/share/fonts/NotoSansCJKjp/*.otfとなるように配置しました。

fc-cache -fvでフォント情報を更新します。

/usr/share/fonts/NotoSansCJKjp: caching, new cache contents: 9 fonts, 0 dirs

上記を流した結果はこんな感じになりました。日本語になってる！！

試してないけど思ったこと

Mac上のローカルなdockerでalpineイメージを使う場合は、-v ~/Library/Fonts:/usr/share/fonts/Fontsとかすると全部持っていけるので、こっちの方がいいかも。ローカルでは。

効かない時

CSSがいじれる環境なら最低限font-family: sans-serif（もしくは、ダイレクトにfont-family: 'Noto Sans CJK JP'）と設定する必要があります。自作Webアプリケーションとかの場合に、この指定をしておくといいかなと思います。