HTML ページに SVG があります。IE 8 などの古いブラウザーは SVG をサポートしていないため、Flash フォールバック用にGoogle のSVG Webライブラリを読み込みます。ブラウザがレガシーの場合、SVG Web は SVG をファントム オブジェクトに変換し、その機能を SWF に複製します。
SVG に font-family 属性を持つテキスト要素がある場合、IE 8 を除いて、これは機能します。IE 8 は、SWF の font-family を無視します。
@font-face をスタイルシートにロードします。
@font-face {
font-family: 'MyriadPro-BoldIt';
src: url('myriadpro-boldit-webfont.eot');
src: url('myriadpro-boldit-webfont.woff') format('woff'),
url('myriadpro-boldit-webfont.ttf') format('truetype'),
url('myriadpro-boldit-webfont.svg#webfontyYDLSfQE') format('svg');
font-weight: normal;
font-style: normal;
}
そして、その font-family を SVG のテキスト要素に適用します。
<script type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="120" version="1.1">
<text x="190" y="80" id="font-test" font-size="44.06" fill="#94dfe3"
font-family="MyriadPro-BoldIt">MyriadPro-BoldIt</text>
</svg>
</script>
ページを表示するために使用するクライアントに関係なく、テキストは見栄えがします。デフォルトの IE 8 フォントでレンダリングするIE 8 を除きます。
最新のブラウザーでFlashを強制するように SVG Web に指示すると、テキストも完璧に見えます。
提案?