くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

woff

Webフォントの運用

仕事がらWebサイト上で外字を表示する必要ある。今までは外字の文字を画像とかにして無理くりやってたんだけど、Webフォントがかなり使えそうな感じになってきているので、色々試してみた。サーバはIISで。

IISの場合、デフォルトではWOFFが使えない状態になっているので、MIMEの種類にWOFFを追加する。そしたらWOFFのファイルをサイトに追加して、font-faceの指定とかやる。コレ参照

上記でとりあえず、外字の表示が可能。

で、ここから運用の話。運用する場合は外字ファイルが変わったら自動的に反映(クライアントにも)させたい。 上記のままだとブラウザキャッシュが残るのでF5押して更新しないと反映されない。

CSSの指定で、キャッシュ廃棄させる用のクエリ文字列付けれるかと思いためしたらちゃんと動いた。以下の感じでfont-faecの指定をする。

@font-face {
    font-family: 'EUDC';
    src: url('../fonts/EUDC.woff?20160101') format('woff');
}

ただ、これだとサイトの基本のCSSファイルを必要に応じて書き換える必要があるので、このfont-faceの指定だけ別だしのCSSファイルとしておいた方がいいかな。

あとは.net MVC前提で、Application_Start()とかの中に、フォントファイルの更新日時でクエリ文字列部分を書き換えてCSSを更新するように仕込んでおけば、WOFFをコピペで上書きすれば、自動的に反映されるんじゃなかろうかと愚考してみる(これだとiisresetはいるけど)。

まだ、試してないけど行けそうかな。。。

ただ、最近だとipAmjmっていうフォントファイルがあるんだけど、こいつサイズがでか過ぎるんだよね・・・。いちを国?がいい加減日本語の字形統一すんぞっていう意気込みで作ってるやつっぽいからそのうち全国的に広まるんじゃないかとも思う(かもしれない)。マイナンバーで使おうとしてるらしいし。てか使ってんのかな。

あー、自治体の業務システム的な話です。役所だと人の名前の字形ってすごくシビアなので、どこでも内字(っていう呼び方であってんのかな)にない文字は外字として作成されているわけで。UTF-16のコード範囲でいうと「E000~F8FF」の私用領域の子たち。

今までは自治体毎に外字作ってるんだけど、最近ipAmjmっていうが出始めてきた。で、このフォントファイルでか過ぎてとりあえず、Chromeさんで表示しようとすると「でか過ぎてロードできねーよ」ってブラウザのコンソールに上がってる。。。んーサブセット化したりしないと無理なんだろうか。。。

IISでWOFFが404になる

Webシステムで外字をWebフォント使って表示させるのを試してみたかっただけど、 CSSで指定しても全く反映されなかった。CSSは↓の感じ。

@font-face {
    font-family: 'EUDC';
    src: url('../fonts/EUDC.woff') format('woff');
}
.gaiziText{
    font-family: "EUDC";
}

ブラウザの開発者ツール使ってみると、フォントファイルをGETしてるところが404になってる。URLは正しい。どうにもわからなかったけど、調べてみるとIISのMIMEにWOFFが入って無くて404になってるらしい。

IISで↓の感じで追加してあげる。

01

02

03

追加するのは↓

拡張子: .woff
MIMEの種類: application/x-font-woff

IISによっては、「.woff」が入ってることもある。ただ、その場合、MIMEの種類が「application/x-woff」になってた。この場合、Chromeで有効にならないっぽい。なので、MIMEの種類は「application/x-font-woff」にしておかないとダメみたい。

IE9とChromeとFireFoxで↑の指定でうまく見れた。

参考にしたのはココ

問合せ