除了衬线和无衬线之外，Firefox 中的 SVG 字体？

Question

我在 Firefox（v26、“Nightly”和未来版本）中呈现的嵌入式 SVG 文件中使用字体。除了serif 和sans-serif 这两种字体，还有什么可用的？

我的 SVG 是在 Adob​​e Illustrator 中生成的。 Any font-family names I specify only render correctly in Safari and Chrome 我不能使用轮廓作为解决方法，因为我将使用动态生成的标签文本来注释 SVG。

除了使用轮廓之外，使用自定义 text 元素注释 SVG 文档以使其在 Firefox 中正确呈现的过程是什么？

Answer 1

关于让你的 SVG 呈现漂亮的字体

完全有可能 Firefox 以自定义字体呈现 SVG text。例如，可以这样做：

 <svg>
   <style>
     @import url(http://fonts.googleapis.com/css?family=Varela+Round);
     text { font-family:Varela Round, sans-serif; }
   </style>
   <text y="20">I will appear in a custom font</text>
 </svg>

This fiddle在一定程度上演示了用法。请注意，在 jsfiddle 中，CSS 是作为 HTML 样式表包含的，而不是直接包含在 CSS 中。

以下可用作数据 URL，即您可以将其直接复制粘贴到地址栏中。它演示了直接使用来自 SVG 的 @import。）

data:text/html, <svg><style>@import url(http://fonts.googleapis.com/css?family=Varela+Round);text { font-family:Varela Round, sans-serif; }</style><text y="20">I will appear in a custom font</text></svg>)

（目前流行的浏览器中，只有Firefox支持地址栏中的数据URL。另外，如果您将数据的MIME更改为image/svg+xml，它在Firefox中将不起作用。

在对此问题的上一个答案的评论中，Robert Longson 还使用<link rel=stylesheet 分享了一个链接demonstrating an imported font。请注意，由于我不明白的技术原因，该页面上的某些字体被 Firefox 拒绝。但是，几乎所有这些都有效。

---

关于SVG 字体的政治

SVG 字体 是一个branch of the SVG spec，它处理在 SVG 文件中定义你的字体。这与我在上面概述的在 SVG 文件中使用字体完全不同。

Mozilla's position on the SVG Font spec，据我了解，SVG 字体的唯一好处是您可以在文本编辑器中手动定义字体。 Others have expressed similar opinions.这就是Mozilla专注于WOFF的原因。

---

importingwebfonts的当前状态是这样的，为了实现跨浏览器/设备的兼容性，你必须提供多种不同的字体格式。这很不幸，但在我看来，这并不是世界末日。

Answer 2

不幸的是，Mozilla 已无限期推迟 SVG 字体实施以专注于 WOFF。事实上，这个错误甚至在 Bugzilla 上被标记为“RESOVLVEDWONTFIX”。这是MDN 的链接和Bugzilla 的链接。

诚然，我对 SVG 字体知之甚少，无法知道 CSS @font-face 元素是否有效，而且我还看到了对 Openfont 的引用。