firefox - Firefox 中除了 serif 和 sans-serif 之外还有 SVG 字体吗？

Question

我在 Firefox(v26、“Nightly”和 future 版本)中渲染的嵌入式 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，即您可以将其直接复制粘贴到地址栏中。它演示了使用 @import直接来自 SVG。)

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 字体 是 branch of the SVG spec它涉及在 SVG 文件中定义字体。这与我在上面概述的在 SVG 文件中使用字体完全不同。

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

<小时/>

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