Chrome 31での@font-face定義

Chrome 31で@font-face定義でunicode-rangeプロパティーを使った時の挙動が変わった。今までは@font-face定義を使ってローカルにあるフォントの一部をunicode-rangeプロパティーで差し替える場合、差し替えるグリフ以外はローカルのフォントが維持されていたんだけど、一部差し替えるだけだと他のグリフが全部失われるようになった。この挙動はInternet Explorer 11と同じで、仕様通りになった。

指定したフォント・ファミリーの名前と同じ名前のフォント・ファミリーがユーザーの環境に存在している場合、そのスタイルシートが使われている文書では(ユーザーの環境に存在している)フォントは事実上使われないことになります。これによりウェブ制作者は、ユーザーの環境にあるフォント・ファミリーの名前との衝突を気にすることなく、自由にフォント・ファミリー名を選択することができるでしょう。

正確には@font-face定義におけるfont-familyプロパティーの取り扱いが仕様通りに変わったということのようだ。

具体的な例だと、以前書いたunicode-rangeを使ってArialにSegoe UI Symbolを混ぜるで挙げたような書き方だと、Arialがぶっ壊れてしまうことになる。修正は簡単で、一旦ArialをArialで定義してから一部差し替えるだけ。

@font-face {
  font-family: "Arial";
  src: local("Arial");
}

@font-face {
  font-family: "Arial";
  src: local("Segoe UI Symbol");
  unicode-range: U+20E3-2B55, U+1F004-1F6C0;
}