ブラウザがフォント パッケージを処理できない場合specialFont
、次のコードは自動的にフォントを に切り替えますbasicFont
。
<p style="font-family:'specialFont', basicFont"> Hello world! </p>
画像でも同じことが可能ですか?一般的に表示したいsvg画像と、svgをサポートしていないブラウザー(一部のモバイルブラウザーなど)用のバックアップpngがあります。
簡単なシナリオはobject
、別のobject
要素 (たとえば、PNG ファイルを参照) を含む要素を使用することです。つまり、フォールバック コンテンツとして使用します。これは Android 2 では問題なく動作するように見えますが、IE 8 以前ではこれと混同されます。そのため、醜い「IE 疑似コメント」(別名「条件付きコメント」) でそれらを処理する必要があると思います。
<!--[if (IE 9)|!(IE)]><!-->
<object data=logo.svg type=image/svg+xml width=50 height=50>
<object data=logo.png type=image/png width=50 height=50>
<span class=logo>ACME</span>
</object>
</object>
<!-- <![endif]-->
<!--[if lte IE 8]>
<img src=logo.png alt=ACME>
<![endif]-->
onerror イベントを使用してギャップを埋めることができます。onError イベントを jQuery などと結び付けることで、デフォルトの画像を提供できます。詳細については、投稿があります。