带有 TTF 字体的 SVG 字体

Posted 2023-03-15

【中文标题】带有 TTF 字体的 SVG 字体

【英文标题】：SVG font-face with TTF fonts

【发布时间】：2013-05-01 05:27:54

【问题描述】：

我正在尝试使用 SVG 标准的字体元素。目前 Webkit 声称他们正确实现了字体模块，但我无法让它与外部引用的 TTF 文件一起使用。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <font-face font-family="blabla">
      <font-face-src>
        <font-face-uri xlink:href="/path/to/font.ttf" />
      </font-face-src>
    </font-face>
  </defs>
  <text font-family="blabla">This doesn't work unfortunately</text>
</svg>

上面的例子不起作用，但是在 SVG 文档中使用带有 @font-face 的嵌入样式标签确实起作用。我究竟做错了什么？ （考虑将此 SVG 文档内联到 html5 文档中。）

如果这实际上是可能的，这是否也可以通过 javascript（字体加载）来实现？

【问题讨论】：

如果使用 CSS 添加时可以使用，为什么不直接使用 CSS？

因为我更喜欢使用更“原生”的实现，如果它应该工作，我想知道它为什么不工作。

这个问题鼓励我尝试 SVG 字体，但我无法让它们在任何浏览器上运行。原因：它们已被普遍弃用。 ☹caniuse.com/#search=svg%20fonts

【参考方案1】：

理论上你的例子应该可以工作，但我认为除了 SVG 字体之外，没有任何浏览器实现了<font-face-uri>。造成这种情况的一个可能原因可能是 SVG 1.1 规范不需要其他字体格式，因此 w3c 的 svg 测试套件中的测试大多使用 SVG 字体格式。

但是使用 css @font-face 并没有错，所有支持 CSS 样式化 svg 内容的 svg 用户代理都需要对 @font-face 的支持，请参阅 http://www.w3.org/TR/SVG11/fonts.html#FontDescriptionsAlternatives。这包括所有当前发布的支持 svg 的网络浏览器。

【讨论】：

我知道@font-face 做得很好，但我仍然想知道为什么Webkit 声称他们支持font-face-uri，但它根本不起作用。