1

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 に指示すると、テキストも完璧に見えます。

提案?

4

0 に答える 0