サブセット化したフォントを指定すると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フォント使えない……みたいなのは嫌なのでなんかうまい方法考えることにしよう。

追記

うまい修正方法考えつくまで放っておこうかと思ったけど、あまりにも気持ち悪いのでとりあえず小文字も含めてサブセット化することによって修正した。text-transformプロパティーとの組み合わせで起こるバグは別にテスト・ページを作成しておいた