SVG不能在火狐浏览器中渲染字体(适用于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';

• Try在导出为SVG之前将AI或PSD中的文本转换为矢量/形状。这将消除对任何字体系列的依赖，这是一个考虑因素，特别是如果您打算将此内容发布到Web上。应该可以完美地工作。

Answer 2

在像illustrator这样的矢量程序中右击文本并选择outline text。无论哪种浏览器，这都将保留你的字体。

Answer 3

我已经在IE11，Chrome和火狐中使用过嵌入式字体，没有任何问题：

<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的工作方式。注意使用正确的字体名称。例如，Illustrator喜欢将"'Roboto-Regular'“放在字体的正确名称上