SVG在Firefox中不渲染字体（适用于IE9和Chrome） [英] SVG doesn't render fonts in Firefox (works in IE9 and Chrome)

问题描述

我在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;写模式：lr-tb; fill：＃000000; fill-opacity：1; fill-rule：nonzero; stroke：none; font-family：Novecento wide Book; -inkscape-font-specification ：Novecentowide-粗体> AI< / TSPAN> 
  

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

我宁愿将SVG文件导出为不需要任何字体的独立向量。如何做到这一点？

解决方案

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

   font-family：'Novecento wide Book';

   尝试转换AI或PSD中的文本导出为SVG之前的矢量/形状。这将消除对任何字体系列的依赖，这是一个考虑，特别是如果你打算在网上发布这一点。应该以这种方式完美工作。

I've got vector logo in PSD file. When I export it as AI (Adobe Illustrator) file and then convert to SVG I get something like this:

<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>

This is only a short part of full SVG file but you can see that it creates letters and attempts to use fonts. Which fails...

I rather want it to export SVG file as stand-alone vector that doesn't require any fonts. How can this be done?

解决方案

Two possibilities:

1. Try putting single-quotes around the font-family name, under the assumption that Firefox is not recognizing the whole string, as so:

   font-family:'Novecento wide Book';

2. Try converting the Text within AI or PSD to a Vector / Shape before exporting as SVG. That will remove the reliance on any font-family, which is a consideration especially if you intend to publish this on the Web. Should work perfectly that way.

这篇关于SVG在Firefox中不渲染字体（适用于IE9和Chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！