SVG不在Firefox中渲染字体（适用于IE9和Chrome）

Question

我在PSD文件中有矢量徽标。当我将其导出为AI（Adobe Illustrator）文件，然后转换为SVG时，我会得到类似的结果：

<tspan
             x="0 34.799999 68.75"
             y="0"
             id="tspan22"
             style="font-size:50px;font-variant:normal;font-weight:bold;font-stretch:normal;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Novecento wide Book;-inkscape-font-specification:Novecentowide-Bold">AI</tspan>

这只是完整SVG文件的一小部分，但您可以看到它创建字母并尝试使用字体。哪个失败......

我更希望它将SVG文件导出为不需要任何字体的独立向量。怎么办呢？

Answer 1

两种可能性：

1. 尝试将单引号放在font-family名称周围，假设Firefox没有识别整个字符串，如下所示：

   font-family:'Novecento wide Book';

2. 尝试在导出为SVG之前将AI或PSD中的文本转换为矢量/形状。这将消除对任何font-family的依赖，这是一个考虑因素，特别是如果您打算在Web上发布它。应该这样完美地工作。

Answer 2

右键单击矢量程序中的文本，如illustrator，然后选择大纲文本。这将保留您的字体，无论哪个浏览器。

Answer 3

我在IE11，Chrome和Firefox中使用嵌入式字体没有任何问题：

<svg...>
    <text transform="matrix(1 0 0 1 52.1787 206.4395)" fill="#F7F7F7" font-family="'Roboto'" font-weight="400" font-size="16">Lorem Ipsum</text>
</svg>

请注意，font-family属性是双引号。这就是插画师的方式。请注意使用正确的字体名称。示例的Illustrator喜欢把“'Roboto-Regular'”放在font-face的正确名称上