SVG 字体的新语法是什么？答案

【问题标题】：What is the new syntax for SVG fonts?SVG 字体的新语法是什么？
【发布时间】：2021-08-30 00:09:32
【问题描述】：

我正在浏览SVG fonts in MDN，其中提到<font-face>、<missing-glyph>、<hkern> 和<vkern> 已被贬值。只有<glyph> 不会折旧。它没有提及指定字体属性的推荐方法。

W3C SVG recommendation 也没有说明指定 SVG 字体的替代方法，除了指出 <font-face> 中的所有内容都可以在 CSS 中等效地完成。它没有为<hkern> 或<vkern> 提供任何替代方案。我打算创建一个独立的 SVG 文件，不被网站 CSS 修改，所以我想将整个字体定义保留在 SVG 中。

那么，这种指定 SVG 字体的晦涩新方法是什么？

【问题讨论】：

已弃用，我已更正 MDN。 SVG 字体的所有功能都已弃用。
@RobertLongson 所以...没有在 SVG 中嵌入字体的好方法吗？
当然，您可以将任何字体嵌入为数据 URI。 Truetype、opentype 等。
@RobertLongson 是的，忘记了。谢谢！

标签： svg fonts

【解决方案1】：

“SVG 字体”作为使用 SVG 标记来定义字体资源的数据文件已被弃用；结果证明这是个坏主意，最终没有解决网络上的排版需要解决的问题。它是在 SVG 1.1 中添加的，但在 SVG 2.0 中是 removed again，并且几乎所有最终添加了对它的支持的浏览器都再次删除了该支持。

相反，所有浏览器现在都支持“webfonts”：使用“Web Open Font Format”（又名 WOFF/WOFF2）为 Web 打包的常规 OpenType 字体，基于 OpenType 格式 supports several different outline types：

TrueType（二次曲线和复合字形，通常带有 ttf 扩展名，但扩展名实际上无关紧要）
CFF/CFF2 中的 Type2（三次曲线和任意子例程，通常带有 otf 扩展名，但同样：扩展名完全不相关）
嵌入式位图（是的，OpenType 字体确实可以是真正的位图字体，具有尽可能多的不同位图以覆盖尽可能多的像素大小）
SVG（这可能令人惊讶，但 SVG 是与 TT 和 CFF/CFF2 完全相同的矢量图形语言，因此允许使用 SVG 指定字形轮廓数据也是有意义的，特别是对于那些需要明确的调色板，例如表情符号字体）

因此，如果您绝对需要保留您的 SVG 数据，则为自己制作一个 OpenType-with-SVG-outlines 字体，然后将其打包为现代 WOFF2（或更旧的 WOFF）用于网络，您就可以去。有很多在线工具可以为您做到这一点，但如果您想要一种仅包含您需要的字体，而不是使用在线工具强加给它们的字体，您也可以使用开源 FontForge 应用程序之类的东西。

【讨论】：

我很想了解更多关于使 svg 成为字体坏主意的原因。
主要是因为一开始就不是一个好主意。即使它第一次被添加到 SVG 规范中，它也从来没有作为真正的字体替代品，而是作为一种过度简化的“代码点序列字形”解决方案。原来我们已经有了其中之一：实际字体。尝试将 SVG“字体”用于现实世界用例的人越多，就越明显他们无法胜任这项任务，而真正的字体却可以，因此每个人都专注于使这项工作（或更好地工作） .这就是我们获得基于 OpenType 的 Web 开放字体格式的方式。