如何将Google Web字体嵌入SVG？
Answers:
您通过使用base64编码将字体嵌入CSS。您可以使用元素在类似于CSS的SVG文档中应用样式<style />。因此，如果您有WOFF字体，则可以这样嵌入：
<style>
@font-face {
font-family: "Sample font";
src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>...base64编码的字体数据在哪里。
您可以通过查看Typekit的样式表找到示例。我不确定的mime类型font/woff是否正确，因为我也看到人们声称它应该是application/font-woff。虽然font/woff，font/truetype，font/opentype等似乎更受欢迎。
或者，您实际上可以采用Web字体的SVG版本，并将SVG字体的描述标记嵌入文档中（尽管Luke在评论中指出，浏览器支持仍然非常有限）。
但是，您还应该能够根据SVG规范链接到外部字体。如果您将有多个引用该字体的SVG文档，那么这似乎是最佳解决方案。
application/font-woff。stackoverflow.com/a/5142316/90674
<defs>像这样的部分
<defs>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>作品。
您可以使用Nano直接将Google Web字体嵌入到SVG中。它会自动扫描SVG并有选择地仅嵌入所需的字体，以确保您的Ubuntu字体在所有现代浏览器上看起来都一样。就我而言，我需要将Roboto嵌入到我的SVG中：
免责声明：我和Nano背后的团队在一起，我们也遇到了以前相同的问题，因此决定通过构建Nano来解决自己的问题。希望这会有所帮助！
编辑：这是有关幕后发生情况的快速说明：
要将字体嵌入SVG中，您首先必须知道使用了哪些字体系列。然后，您需要找到这些字体文件并下载。下载后，您必须将常规，粗体，斜体和粗体斜体转换为基于64的编码。如果您手动进行操作，则要了解大量文件，要知道哪个文件使用粗体，而哪些文件不使用粗体，则需要进行大量工作。然后，您必须将所有4个base 64编码的字符串复制到SVG中。
这就是为什么我们构建Nano并确保其自动扫描SVG并仅插入所使用的字体的原因。例如，如果不使用粗体或不存在任何文本，则不会嵌入任何字体。您需要做的就是将SVG拖放到Nano中，它就像一个魅力！您可以在此处了解更多信息：https : //vecta.io/blog/making-svg-easier-to-use
在<desc>标签后添加以下内容
<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>更新我的答案。我现在在此页面上更喜欢使用Nano的其他答案：https : //graphicdesign.stackexchange.com/a/121950/45239
假设您已经在系统上下载并安装了Web字体并创建了SVG（也许使用了与我在下面介绍的许多步骤相同的步骤，但未选择“字体：转换为轮廓”），则可以将SVG上传到Nano并查看“嵌入字体：是”选项，然后单击“下载”。
我以前的回答：
如果您愿意牺牲可选择的文字和SEO：
- 下载网络字体。
- 在本地安装。
- 打开Adobe Illustrator
- 输入您的文字。
- 文件>导出>导出为...
- 选择“ .SVG”
选择以下设置：
- 样式：内联样式
- 字体：转换为轮廓
- 图片：保留
- 对象ID：层名称
- 小数：2
- （启用）缩小
- （启用）响应式
（可选）将生成的svg上传到https://vecta.io/nano（它能够将文件大小减少8.2％）