将来的にブラウザでJavaScriptのリサイズや移動の許可・不許可設定みたいにWebフォントを使う・使わないを設定できるようになると思うんですよ(CSSアニメーションやトランスフォームとかも)。そうなるとDingbatのWebフォントを使った場合、その部分は普通のフォントで表示される可能性が高く、無意味な文字列が表示されるんではないかなと。既に現状でもドキュメントで指定されたフォントを使用しないという設定を有効にしているとそうなります。
例えばDingbatのWebフォントの利用デモであるCSS-TricksのIcon Fonts are Awesomeで使われているFicoではBに吹き出しの絵が割り当てられています。この吹き出しは以下のようなコメント数の表示などに対して使うことになるでしょう。
<a href="#comments" class="icon comment-info">Comments (12)</a>勿論HTMLで以下のように予めBという無意味な文字を埋め込むのは良くないでしょう。
<a href="#" class="comment-info"><span class="icon">B</span> Comments (12)</a>なのでCSSの::before擬似要素を使うことになります。
.icon::before {
font-family: "Fico";
}
.comment-info::before {
content: "B ";
}これでカワイイ吹き出しアイコンがコメント数の表示の前に付きますね。
ではWebフォントを無効にすることができるブラウザが出現し、無効に設定したらどうなるでしょうか？ またはドキュメントで指定されたフォントを使用しない設定にしているユーザーには？
B Comments (12)
当然このような表示になりますよね。「Bってなに？ ブコメ？」と混乱するのはまず間違いないでしょう。そしてこのBは適切にフォールバック、あるいは非表示にすることはできないでしょう(少なくとも僕はまだ思いつきません)。そういう意味でCSS Tricksのデモ・ページに煽り気味に書かれている「SVG is better.」はいくらか正しいんじゃないかと思います。SVGを画像や背景画像として流しこむ場合は、画像の非表示というブラウザで可能な設定が意識すべきことに変わりますが、その場合は単なる空白ができるだけ(うまくやれば空白もできない)なのでDingbatのWebフォントに比べれば問題は少なそうです。
Webフォントのような外部リソースを引っ張ってきたりするものや、ページの状態に大きな効果を与えるものを嫌う人は少なくありません。もちろんJavaScriptを無効にしている人程度かそれ以下の割り合いでしょうが、そのことはしっかりと意識しておくべきでしょう。その上であえて無視するというのなら構わないと思いますが。
またちょっと本題から外れますが、擬似要素についてはその文字列がコピーできるブラウザ(Internet Explorer 9など)もあったりするので、色々考えて使ったほうが良いと思います。この例ではB Comments (12)というおそらくユーザーが意図しない文字列がコピーされます。コードの行番号とかに使っちゃダメですよ！バカですね、この人！