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

Question

标题含糊不清; 让我澄清一下:我有一个svg图像,其中包含我想用自定义字体渲染的文本.

但是,在html页面中嵌入字体时似乎没有出现新问题.此外,一些浏览器(即Firefox)似乎img不同于直接渲染svg时页内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中,出于隐私原因,图像必须是完全独立的,即一个文件中的所有内容.

如果你想让字体工作,你必须对它们进行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';
    }
}

无论如何，由于文件很大，嵌入字体感觉是错误的。