Webフォントを使って三点リーダーを表現する際の注意点

半年ぶりの更新がバグネタってのが情けないね。
この記事は CSS珍100景 Advent Calender2014に合わせて記事投稿してます。
貯蓄したバグネタと被っていないか色々とググッた結果、8割ぐらいが既に報告があがっていたので、引き出しの少なさを実感する次第。

Webフォント（Webフォントサービス）を使うとCSS3の三点リーダーが表示されない

Fonts.comのAixsフォントを使っていた時に起きた現象をご紹介。
CSS3を使って三点リーダーによる文言省略を実現するには、

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

と記述するが、（ここや、ここのサイトのほうが詳しく紹介している）

WEBフォントを適用している文字列に対して、このCSSを設定しても省略記号（...）がでない。なんぞ...?と思い、色々と試行錯誤してみたが、Webフォントを読み込まないとうまくいくことが判明。

結論を言ってしまうとなんてことはなく、Webフォントを読み込む際に、ベンダーが支給しているフォント読み込み用JSが、ページ内にどんな文字が使われているかを判定して、読み込むグリフだけをサブセット化している仕組みの盲点から起きる問題っぽい。上記CSSで作成する三点リーダー文字「…」は、読み込みの対象外のようです。

解決策

一番簡単な方法は、省略文字に対してWebフォント（Webフォントサービス）を使わないこと。
他の方法としてはJSで無理やりやるとか、3点リーダを画像化して、省略文字の前にかならず表示されるようにセットする、どこかに「…」文字を表示させておく....といったトリッキーな方法があるけど、どれも費用対効果に見合わない対策なので、あんまりオススメはしないです。こわい。

現場からは以上です。