Question

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

我的SVG是在Adobe 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中。

以下内容可用作数据网址，即您可以将其直接复制粘贴到地址栏中。它演示了如何直接使用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支持地址栏中的数据网址。如果您将数据的MIME更改为image/svg+xml，它将无法在Firefox中使用。

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

关于 SVG Fonts

的政治

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的当前状态是这样的，为了实现跨浏览器/设备兼容性，您必须提供多种不同的字体格式。这是不幸的，但在我看来，这几乎不是世界末日。

Answer 2

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

不可否认，我对SVG Font知之甚少，知道CSS @font-face元素是否有效，我也看到了对Openfont的引用。

除了serif和sans-serif之外，Firefox中的SVG字体？

2 个答案:

使您的SVG渲染漂亮的字体

关于 SVG Fonts