Question

我正在尝试使用SVG标准的font-face元素。目前，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 aswell（字体加载）？

Answer 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的Web浏览器。

带有TTF字体的SVG font-face

1 个答案: