svg - SVG 字体的新语法是什么？

Question

我在浏览SVG fonts in MDN ，其中提到 <font-face> , <missing-glyph> , <hkern> 和 <vkern> 被贬值了。只有 <glyph> 没有折旧。它没有提及有关指定字体外观属性的推荐方法的任何内容。

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

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

Answer 1

“SVG 字体”作为使用 SVG 标记定义字体资源的数据文件已被弃用；结果证明这是一个坏主意，最终没有解决网络上的排版需要解决的问题。它是在 SVG 1.1 中添加的，但 removed again在 SVG 2.0 中，几乎所有最终添加对它的支持的浏览器都再次删除了该支持。
相反，所有浏览器现在都支持“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 数据，那么让自己成为带有 SVG 轮廓的 OpenType 字体，然后将其打包为现代 WOFF2(或较旧的 WOFF)用于网络，您就可以开始使用了。有很多在线工具可以为您做到这一点，但您也可以使用开源 FontForge 之类的工具。如果您想要一种仅包含您需要的字体而不是在线工具强加给它们的字体，请使用应用程序。