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. 假设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的正确名称