Google 字体未在 SVG 代码中显示答案

【问题标题】：Google font is not displaying in SVG codeGoogle 字体未在 SVG 代码中显示
【发布时间】：2019-02-08 07:01:03
【问题描述】：

在 this page 上，我有一个 SVG 代码。 SVG 文件仅显示基本的 REGULAR 字体类型。不过，我使用了所有字体变体（斜体、粗体、粗体、半粗体、深色）。

我在文件和外部 CSS 中都尝试了@import 方法和链接 rel。分别是。

@import url('https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,600i,700,700i,900,900i');

我还研究了这个solution，它是在SVG文件中使用@font-face方法设置的（尝试了粗体、常规等，但无济于事）：

代码sn-p：

<!-- Generator: Adobe Illustrator 21.1.0, 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 5390.3 959.3" style="enable-background:new 0 0 5390.3 959.3;" xml:space="preserve">
<style type="text/css">
	@import {font-family: 'Vollkorn', serif; src: url('Vollkorn/Vollkorn-Bold.ttf')}
    svg{font-family: 'Vollkorn', serif;}
    .....

【问题讨论】：

标签： svg fonts font-face google-fonts

【解决方案1】：

你的问题是，即使你正在设置

svg{font-family: 'Vollkorn', serif;}

您的文本类过度使用字体系列，规则如下。

.st22{font-family:'Vollkorn-SemiBold';}

“Volkorn-SemiBold”没有在任何地方定义。更改您的课程，以便他们只使用“Volkorn”

.st22{font-family:'Vollkorn';}

或完全删除它们，因为它们现在什么都不做。

【讨论】：

如果您在 googleapi 样式表中使用 @import 子句，则会导入各种字体变体，但您必须通过设置 font-family:Vollkorn;font-weight:600 等来定位它们。
这行得通。谢谢你。我希望谷歌通过它们各自的名称“捕捉”字体来自动为 SVG 实现这一点。当您导出 SVG 代码或保存 SVG 文件时，Illustrator 只会输出字体的名称。
一个附带问题，如果可以的话。在文本样式更改为下划线的某些地方，SVG 代码无法正确呈现。因此，我将 + 符号重叠到一个单词上。我想我必须修改矩阵坐标来解决这个问题，还是有更好的方法来解决这个问题？
Illustrator 似乎在每次样式更改时直接定位文本的各个位。我不确定是否有办法阻止 Illustrator 这样做。您不需要开始一个新的位置<text> 元素只是为了给一个单词加下划线。请参阅 before 和 after。但是请注意，文本的长度显然会有所不同。但是您可以使用textLength 属性来解决这个问题（参见“之后”示例）。