再開した途端1ヶ月書いてないし、Sound Canvas VAの話しでもないんですが気にしない。
さて、元々のきっかけはちょっと前に修正されるまで発生していたSlackのWindowsアプリで日本語が中国語のフォントで表示されるという問題です。
公式が修正してくれるまで暫定の対応方法を公開してくれた方がいたのですが、SlackのWindowsアプリはNode.js&Electronでできているのでソースを改造してCSSで!important指定されたfont-familyをdocument.headに差し込んでしまうというやり方でした。
その方は表示するフォントとしてメイリオを指定していたのですが、メイリオの日本語フォントには斜体が無いのでそれはそれで本来の姿と見た目が変わってしまうのが少し不満でした。
そこでさらに改造しようと思ったのですが、この際に必要なフォントファイルも一緒にパッケージングしてしまいいちいちリモートに取りに行かなくてもローカルにあるフォントファイルで表示しようと考えました。
最も単純なやり方はCSSで@font-faceを指定し、urlにローカルのフォントファイルのパスを書くことです。
しかしこれでは適用できませんでした。
セキュリティ担保のためローカルのファイルへのアクセスは禁止されているためです。
そこでなんとかならないか調べていたところ、CSS Font Loading Module Level 3を見つけました。
JavaScriptからフォントを動的にロードさせるためのAPIです。
動的なロードならこのAPIでなくとも@font-faceを持つstyleタグを作ってdocument.headに差し込むという手もありますが、CSS Font Loading Module Level 3の場合、フォントをロードする際にWebフォントのあるurlだけでなくフォントファイルの内容そのものを格納したArrayBufferを渡すことができます。
Node.jsならローカルのファイルを読み出すことはできるので、バイナリでフォントファイルを読み込んでCSS Font Loading Module Level 3でフォントをdocument.fontsに追加すれば無事にローカルのフォントファイルを適用させることができました。
これで問題に対処できたのですが、つい最近ver2.0が出て日本語フォントの問題が解決しこの苦労は無駄になりました。とはいえこのAPIを調べてたときにコードの実装サンプルはあったものの、APIの呼び出し方とかだけで実際動くものは見つけられなかったので折角調べたついでとして動作するサンプルを作成しました。
最近は日本語も収録されているフリーのフォントも増えてきており、字体のサンプルも配布側が用意してくれている場合もあるのですがABCDE・・・などの文字が順番にいくつか並んでいるだけとか、実際に文章を表示させたらどう見えるのかイマイチよく分からない場合があります。
その場合実際に自分のPCにインストールして試せばいいわけですが、気に入らなかったらアンインストールするのも面倒くさかったり、アンインストールするのを忘れてしまったりということもあるかと思います。
そこでちょっとニッチな用途になるかと思いますが、ローカルのフォントファイルをFile APIで読み込んでそこそこの長さの文章を表示させてみるサンプルを作りました。
CSS Font Loading Module Level 3 テストページ
またhtmlファイル、cssファイル、jsファイルの一式をまとめたファイルも下記に置いておきます。
font_sample.zip
inputのtype=fileで指定されたファイルならばローカルのファイルであってもFile APIで読み込み可能なのを利用しています。
なお、適当な文章が思いつかなかったので著作権の切れた文学作品を使用させてもらうことにしました。
英語のサンプルはH・G・ウエルズのタイム・マシンの冒頭部、日本語のサンプルは夏目漱石の吾輩は猫であるの冒頭部です。
font_sample.jsにはコメントを入れておいたので特に説明の必要は無いかと思いますが、64行目でFileReader.readAsArrayBufferメソッドを呼び出してファイルの内容をArrayBufferに格納することと、40行目で読み込んだ内容をFontFaceオブジェクトのコンストラクタ第2引数にセットすることがポイントでしょうか。
なお、第2引数にはArrayBuffer以外にも@font-faceを使うときのようにurlの文字列を渡すことができるそうです。
ちなみに第1引数がフォントファミリーの名前になるので、font_sample.cssの33行目でのfont-family指定での名前と合わせておかないと折角読み込んでも使われないままになってしまいます。
