Question

标题含糊不清;让我澄清一下：我有一个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图像中渲染嵌入字体。）

Answer 1

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

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

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

Answer 2

我最终使用了这个：

<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％的整体支持。

唯一真正令人困扰的事情是Safari 5.1完全没有这样的文字呈现。我不得不在css声明中制作一个只有Safari的后备：

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

无论如何，嵌入字体只是感觉错误，因为文件很大。

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

2 个答案: