从 Illustrator CC 导出到 SVG 后，Live Type 字体不会出现

Question

我正在尝试为我们正在为我们的网站构建的基于浏览器的定制器导出我们的几个设计文件。如标题所述，我运行遇到一个问题，即实时类型不会出现在浏览器中。

我不仅使用了 3 种系统字体，还在 SVG 的根目录中包含了每种字体的 4 种不同格式（ttf、woff/2、otf 和 svg）。无论我尝试了什么，我都无法让徽章中心的文字出现，也无法让任何文字显示适当的字体。下面是 SVG 代码（我省略了 Book 字体的 font-face 声明）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 198.43 119.06" style="enable-background:new 0 0 198.43 119.06;" xml:space="preserve">
<defs>
  <style type="text/css">
    @font-face {
     font-family: 'Algerian';
     src: url('Algerian.eot');
     src: url('Algerian.woff') format('woff'), url('Algerian.ttf') format('truetype'), url('Algerian.svg#Algerian') format('svg');
     font-weight: normal;
     font-style: normal;
    }

    .st0{display:none;}
    .st1{display:inline;}
    .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
    .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#232020;}
    .st4{fill:#231F20;}
    .st5{font-family:'STSong';}
    .st6{font-size:9.4647px;}
    .st7{fill:none;}
  </style>
</defs>

<g id="Image_xA0_332" class="st0">
  <g class="st1">
    <rect x="51.55" y="58.03" class="st2" width="93.61" height="9.06"/>
  </g>
</g>
<g>
  <path />...
  <polygon points="110.4,18.87 110.41,18.91 110.37,18.9     "/>
</g>
<g id="Right_Line_1_">
  <g>
    <rect x="132.27" y="61.86" class="st3" width="9.74" height="0.88"/>
  </g>
</g>
<g id="Left_Line_1_">
  <g>
    <rect x="54.69" y="61.86" class="st3" width="9.74" height="0.88"/>
  </g>
</g>


<text transform="matrix(1 0 0 1 65.5015 64.6816)">
  <tspan x="0" y="0" class="st4 st5 st6">EST.</tspan>
  <tspan x="20.15" y="0" class="st4 st5 st6"> </tspan>
  <tspan x="21.95" y="0" class="st4 st5 st6">06.27.2014</tspan>
</text>

<path id="SVGID_x5F_1_x5F_" class="st7" d="M8.19,96.94c0,0,38.04,5.57,89.4-5.56c0,0,59-14.38,92.17-0.62"/>

<text>
  <textPath  xlink:href="#SVGID_x5F_1_x5F_" startOffset="0%">
    <tspan style="fill:#FFFFFF; font-family:'BookmanOldStyle-Bold'; font-size:16.6697px;">ALEX &amp; MARCIA</tspan>
  </textPath>
</text>

<path id="SVGID_x5F_2_x5F_" class="st7" d="M32.56,57.72"/>

<text>
  <textPath  xlink:href="#SVGID_x5F_2_x5F_" startOffset="0%">
    <tspan class="st4" style="font-family:'Algerian'; font-size:29.2545px;">SANCHEZ</tspan>
  </textPath>
</text>
</svg>

我错过了什么？我什至尝试在 font-face 声明中将 SVG 字体文件作为 base64 嵌入。

Answer 1

我认为您遇到的问题是您在 SVG 本身中添加了 @font-face 声明 。如果您将 SVG 内联放置在 HTML 文件中，您应该能够将 @font-face CSS 移动到 HTML 文档中：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> <style> @font-face { font-family: 'Example'; src: url('Example-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } </style> </head> <body>  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 198 119"> <defs> <style type="text/css"> /* I removed the @font-face declaration * here, it’s just the exported CSS now. */ .st5 { font-family: 'Example' ;} /* Etc. */ </style> </defs>  <text transform="matrix(1 0 0 1 65 64)"> <tspan x="0" y="0" class="st4 st5 st6">EST. 06.27.2014</tspan> </text> </svg> </body> </html>

这种方法适用于以下情况：

已经在网站上使用与 SVG 中相同的网络字体文件，并且

使用内联 SVG，而不是图像

如果您需要在这样的图像标签中使用 SVG：

<img src="path/to/my-svg.svg" alt="Description of text in the SVG" />

…那么当你从 Illustrator 导出它时，你需要勾勒出类型。与其在 Illustrator 文件本身中执行此操作，不如通过点击导出设置面板中的这个小齿轮 ⚙️ 来保持类型“实时”并更改 SVG 导出设置：

现在，您可以在边栏中选择 SVG，并更改 SVG 导出设置：

尝试将此设置更改为“隐藏到轮廓”。您也可以将小数精度降低到 2 或 3。

如果您满足以下条件，此方法会很有效：

需要在 img 元素中使用 SVG 作为外部图像，或者

使用的字体不会在网站上用作网络字体，或者

我发现自己在这些选项之间切换，具体取决于网站上已有的字体、内容应被视为文本还是图像，以及 SVG 的复杂性。

如果文字带有轮廓但仍然是网站内容的一部分，就像任何其他图像一样，添加或改进 SVG 中的标题和描述也很重要。

在您的特定 SVG 中，一些文本是白色的，并且至少有一段可能“关闭 canvas”，因此可能值得制作一个简单的示例 SVG 进行测试。

希望其中一种方法对您有所帮助！

从 Illustrator CC 导出到 SVG 后，Live Type 字体不会出现

Live Type fonts won't appear after exporting to SVG from Illustrator CC

svg

fonts

responsive-design

font-face

webfonts