2012-05-16

Opera 11とサブセット化したフォント

ナビゲーションとロゴをサブセット化したフォントを使うようにしたのだけど、Opera 11で一文字目にしか反映されないというなかなか意味不明なバグにハマった。Nextでも起こるので当面直らなそう。こういう現象も起こるよ……というメモにしとこうかと思ったけど、どうやらtext-transformプロパティーとの組み合わせでおかしくなっているっぽい。

ここのナビゲーションは、

<header role="banner">
  <nav>
    <ul>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

とHTMLではなっていて、

[role="banner"] nav {
  font-family: "Nav", sans-serif;
  text-transform: uppercase;
}

でキャピタライズしている。サブセット化したフォントは大文字しか含めていない。この両者が良くないようでグリフの有無をキャピタライズする前の文字列で判断しているらしく、Opera 11はグリフが無いと判断してしまうようだ。そして残りは持ってないグリフが明朝体になるバグが発火してsans-serifにすらならないという……。

他にも色々テストしていたら存在しないグリフ以降でおかしくなるみたいなバグも見つけた。Operaのことを考えるとWebフォント使えない……みたいなのは嫌なのでなんかうまい方法考えることにしよう。