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

【问题标题】：Live Type fonts won't appear after exporting to SVG from Illustrator CC从 Illustrator CC 导出到 SVG 后，Live Type 字体不会出现
【发布时间】：2019-07-02 01:56:22
【问题描述】：

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

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

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

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

【问题讨论】：

标签： svg fonts responsive-design font-face webfonts

【解决方案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>
    <!-- Your exported SVG file, with the SVG Font export setting kept as “SVG”: -->
    <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>
        <!-- Etc. -->
        <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。

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

需要将 SVG 用作img 元素中的外部图像，或者
正在使用不会在网站上用作网络字体的字体，或者

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

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

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

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

【讨论】：