问svg图像中的跨浏览器嵌入字体
EN

Stack Overflow用户

提问于 2014-01-03 13:42:52

回答 2查看 14.8K关注 0票数 12

标题是模棱两可的；让我澄清一下:我有一个svg图像，其中包含我想要用自定义字体呈现的文本。

但是，在html页面中嵌入字体时，似乎出现了一些新问题。此外，一些浏览器(即Firefox)处理页面内svg (“在img标记中”)的方式似乎与直接呈现svg的方式不同。

<defs>
<style>
    @font-face {
        font-family: "Open Sans";
        src: local("Open Sans"),
            local("OpenSans"),
            url('https://example.com/OpenSans-Regular.eot') format('eot'),
            url('https://example.com/OpenSans-Regular.woff') format('woff'),
            url('https://example.com/OpenSans-Regular.ttf') format('truetype');
    }
    /* ...

据我所知，如果这是一个网页，它会成功地呈现在几乎所有地方。然而，作为一个svg，我不能让它工作。当前的格式几乎在任何地方都可以使用，除了IE10 (可能还有更老的版本)：字体有时加载，有时不加载。将woff文件内联为base64编码文件是可行的，但这会破坏Safari的功能(而且更改顺序也无法修复它)。

在svg图像中有没有一种跨浏览器嵌入字体的可靠方法？(再说一次，我的意思不是在网页中嵌入svg字体，而是在svg图像中呈现嵌入的字体。)

html

svg

fonts

云直播特惠9.9元起

针对高并发播放、高并发推流、超低延迟等不同直播场景，提供极速、稳定、专业的一站式云端直播处理服务

回答 2

Stack Overflow用户

发布于 2014-01-03 14:50:43

至少在火狐中，图片必须是完全自包含的，即所有的图片都在一个文件for privacy reasons中。

如果你想让字体起作用，你必须对它们进行base64编码，并将它们作为数据URL嵌入到SVG文件中。

@font-face {
    font-family: 'Open Sans';
    src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}

票数 8

Stack Overflow用户

发布于 2014-01-03 19:07:08

我最终使用了这个：

<defs>
<style type="text/css">
<![CDATA[
    @font-face {
        font-family: "Open Sans";
        src: local("Open Sans"), /* IE */
            local("OpenSans"),
            url("data:application/vnd.ms-fontobject;charset=utf-8;base64,{$fontEot}") format('embedded-opentype'),
            url("data:application/x-font-woff;charset=utf-8;base64,{$fontWoff}") format('woff'),
            url('https://example.com/OpenSans-Regular.ttf') format('truetype');
    }
]]>
</style>

支持：

+------------+--------+-------+-------+-----------+
|            | Win XP | Win 7 | iOS 6 | OS X 10.9 |
+------------+--------+-------+-------+-----------+
| IE  8      |     no |    no |       |           |
| IE  9      |        |   yes |       |           |
| IE 10      |        |   yes |       |           |
| IE 11      |        |   yes |       |           |
| Safari 4   |        |   yes |       |           |
| Safari 5.0 |        |   yes |       |           |
| Safari 5.1 |        |    no |       |           |
| Safari 7   |        |    no |       |       yes |
| Safari iOS |        |       |   yes |           |
| FF  3.6    |     no |    no |       |           |
| FF  4      |    yes |   yes |       |           |
| FF 27      |    yes |   yes |       |       yes |
| Chrome 14  |    yes |   yes |       |           |
| Chrome 33  |    yes |   yes |       |       yes |
| Opera 10.6 |    yes |   yes |       |           |
| Opera 19   |    yes |       |       |           |
+------------+--------+-------+-------+-----------+

根据http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201310-201312-bar，这相当于总支持率约为85 %。

唯一令人烦恼的是Safari5.1根本不会呈现这样的文本。我不得不在css声明中做一个仅限Safari的回退：

/* Win Safari fallback */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari only */
    ::i-block-chrome,text {
        font-family: 'Verdana';
    }
}