我正在我的网站上写一篇关于新 Web 技术优势的文章，其中包括 HTML5、CSS3 和 SVG，后者的优势之一是能够在原本有效的图像中选择文本。
我是 SVG 的新手，刚刚在 Illustrator 中制作了我的第一个像样的图形。我已将其嵌入到标签中带有 Ubuntu 字体的 GWF 脚本的页面中。事实证明，Ubuntu 字体可以在常规文本中正确显示，但是要让这个技巧在 SVG 中起作用，Google 脚本必须嵌入到 SVG 本身中。我怎样才能做到这一点？
如何将 Google Web 字体嵌入 SVG？
平面设计
svg
网络字体
2022-01-09 22:57:46
4个回答
您可以使用 base64 编码在 CSS 中嵌入字体。您可以使用元素在 SVG 文档中应用类似于 CSS 的样式<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等似乎更受欢迎。
或者，您实际上可以采用 SVG 版本的 Web 字体并将SVG 字体的描述标记嵌入到您的文档中（尽管正如 Luke 在评论中指出的那样，浏览器支持仍然非常有限）。
但是，您还应该能够根据 SVG 规范链接到外部字体。如果您将有多个 SVG 文档引用该字体，这似乎是最好的解决方案。
像这样的<defs>部分
<defs>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>
作品。
您可以使用Nano直接将 Google Web Fonts 嵌入到您的 SVG 中。它会自动扫描您的 SVG 并选择性地仅嵌入所需的字体，确保您的 Ubuntu 字体在所有现代浏览器上看起来都一样。就我而言，我需要将 Roboto 嵌入到我的 SVG 中：
免责声明：我和 Nano 背后的团队在一起，我们之前也遇到过同样的问题，因此决定通过构建 Nano 来解决我们自己的问题。希望这有帮助！
编辑：这是对幕后发生的事情的快速解释：
要在 SVG 中嵌入字体，您首先必须知道使用了哪些字体系列。然后你需要找到这些字体文件并下载它们。下载后，您必须将常规、粗体、斜体和粗斜体转换为 base 64 编码。如果您手动执行此操作，则需要对大量文件进行大量工作，才能知道哪些文件使用粗体，哪些文件不使用。然后您必须将所有 4 个 base 64 编码字符串复制到您的 SVG 中。
这就是我们构建 Nano 并确保它自动扫描 SVG 并仅插入正在使用的字体的原因。例如，如果不使用粗体或不存在文本，则不会嵌入任何字体。您需要做的就是将您的 SVG 拖放到 Nano 中，它就像一个魅力！您可以在这里了解更多信息：https ://vecta.io/blog/making-svg-easier-to-use
更新我的答案。我现在更喜欢此页面上的不同答案，即使用 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%）