1

我在 HTML 页面中有一个 SVG。像 IE 8 这样的旧浏览器不支持 SVG，因此我加载了 Google 的SVG Web库以作为 Flash 后备。如果浏览器是旧版浏览器，SVG Web 会将 SVG 转换为幻像对象并在 SWF 中复制其功能。

如果 SVG 有一个带有 font-family 属性的文本元素，则此方法有效，但在 IE 8 中除外。IE 8 忽略 SWF 中的字体系列。

例子

我在样式表中加载@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;
}

并将该字体系列应用于 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 字体呈现。

当我指示 SVG Web在现代浏览器上强制使用 Flash时，文本看起来也很完美。

建议？

4

0 回答 0