除了衬线字体和无衬线字体之外，Firefox 中还支持哪些 SVG 字体？

Question

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

我的SVG是在Adobe Illustrator中生成的。我指定的任何font-family名称只在Safari和Chrome中正确呈现，我不能使用轮廓作为解决方法，因为我将使用动态生成的标签文本注释SVG。

除了使用轮廓之外，如何在SVG文档中注释自定义text元素，以便它们在Firefox中正确呈现？

- Alex Reynolds

---

这个问题是关于使用用SVG定义的字体，还是导入特定字体以在SVG中使用？我感到困惑，因为悬赏信息似乎是针对前一种情况，但问题中没有具体提到SVG字体。 - Jeremy

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>

这个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还共享了一个链接demonstrating an imported font，其中使用了<link rel=stylesheet。请注意，该页面上的某些字体由于我不理解的技术原因而被Firefox拒绝。但是，几乎所有这些字体都可以正常工作。）

---

关于SVG字体的政治问题

SVG字体是SVG规范的一个分支，用于在SVG文件中定义字体。这与我之前概述的在SVG文件中使用字体完全不同。

据我了解，Mozilla对SVG字体规范的立场是，SVG字体的唯一优点是可以手动在文本编辑器中定义字体。其他人也表达了类似的观点。这就是为什么Mozilla集中精力开发WOFF的原因。

---

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

- Jeremy

---

我没有重新分发所涉及的“漂亮”字体的权利，因此虽然我感谢您抽出时间写这篇文章，但我不能使用您的答案来解决Firefox似乎故意选择忽略的奇怪错误。 - Alex Reynolds

@Jeremy 尽管这个答案对 OP 的情况没有帮助，但我发现它在我的使用案例中非常有用。 - Uli Köhler

@AlexReynolds 如果您不被允许分发字体，您可以在保存为SVG之前将文本矢量化。 - mb21

正如我在问题中所指出的，我无法使用轮廓，因为我将在SVG中呈现动态生成的文本。 - Alex Reynolds

Answer 2

很遗憾，Mozilla无限期推迟了SVG字体的实现，以便专注于WOFF。事实上，这个错误在Bugzilla上甚至被标记为“RESOLVEDWONTFIX”。这是 MDN和Bugzilla的链接。

诚然我对SVG字体知之甚少，不知道CSS @font-face元素是否可行，我也看到了Openfont的参考资料。

- Bmize729

---

我对将Internet Explorer和Firefox归为昨天不符合标准的浏览器感到奇怪。但这是Mozilla的选择，我想。 - Alex Reynolds

FF和IE之间的一个区别是Mozilla提供了一个解释。我可以确认@font-face在Firefox中也可以工作，所以抨击Mozilla似乎是不必要的，而且有点粗鲁。 - Jeremy

以下 Mozilla 文档建议 @font-face 在 SVG 和 Firefox 中不起作用：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face - Alex Reynolds

当然可以：尝试访问此链接https://jwatt.org/svg-open/2009/demos/font-face/web-fonts-in-html-and-svg.xhtml - Robert Longson

相信我，我不想发一篇批评Firefox的回复，因为它是我最喜欢的浏览器。我只是不能相信我所读到的。不过，我很高兴听到有一种通过CSS解决的方法。 - Bmize729