私の愛しいアップルパイへ
スマホユーザーが増えてPixel Ratioの選択肢が広がったいま、アイコンフォンを活用しないわけにはいきませんよね。しかし本日、作成したアイコンフォントを修正してgit commitしたところアイコンフォントが正常に読み込めなくなる問題が発生してソワソワしました。
原因は、gitが改行コードのCRLFをLFに自動変換する処理において、バイナリー内のCRLFまでLFに書き換えてしまうことで、バイナリーが壊れてしまっていたことでした。
そんな問題にあなたには躓いてほしくないので、対応方法を解説します。
アイコンフォント内の改行コードをgitが自動置換してしまう問題
Windowsの開発者はCRLFでコミットする可能性がありますし、Mac OSやLinuxだとLFでコミットされる可能性があります。gitはソース管理の仕組みなので、管理対象のソースに複数の改行コードが含まれていると望ましくありません。
そこで、git対象化のソースに改行コードがCRLFでコミットしてきた不届き者が居たら、LFに自動変換する便利機能が備わっています。
通常は画像などのバイナリーファイルはこの改行コード自動変換の対象にされないようになっているものですが、アイコンフォントはちょいと特殊な拡張子のファイルであることもあり、この自動変換の対象外になっていないことがあります。
なので、アイコンフォント内にたまたまCRLFの改行コードに該当するものが含まれていると、バイナリーを壊してしまうわけです。
それでは困ってしまうので、アイコンフォントでも改行コードの自動変換を行わないようにすれば問題は解決です。
本問題に該当したときに出力されるエラー
本事象に該当したときに出力されるエラーを掲載しておきましょう。
▼本事象が発生すると、Webブラウザではアイコンフォントが読み込めなくなり、WebブラウザのConsoleには以下のようなエラーが出力されます。
Failed to decode downloaded font: [アイコンフォントのURL] OTS parsing error: post: table overruns end of file OTS parsing error: incorrect file size in WOFF header
▼また、気づかずに本番環境にデプロイしてしまったりするとアイコンフォントのバイナリファイル(eot,ttf,woff)が勝手に書き換わるので、変更のあったファイルとして認識されます。
# On branch master # You have unmerged paths. # (fix conflicts and run "git commit") # # Changes to be committed: # # modified: cakephp/webroot/css/tcc_font/fonts/icomoon.eot # modified: cakephp/webroot/css/tcc_font/fonts/icomoon.ttf # modified: cakephp/webroot/css/tcc_font/fonts/icomoon.woff
アイコンフォントをgit管理するとファイルが破損するときの対応方法
対応方法をご教示いたしましょう。
アイコンフォントのファイルがバイナリーであることをgitに認識させればこのような自動置換を行わなくなるので、問題は解決です。
▼具体的には.gitattributesファイルに以下のような記述を追加してみてください。アブラカタブゥーラッ!
*.otf binary *.eot binary *.svg binary *.ttf binary *.woff binary
▼ちなみに、以下のコマンドを使えば改行コードの自動置換自体を無効化できます。ただし、ソースに複数の改行コードが混在するのは望ましくないのでオススメはしません。
git config --global core.autocrlf false
これで問題は解決したはずです。お疲れ様でした。
貴下の従順なる下僕 松崎より