【问题标题】:SVG on the web with special fonts带有特殊字体的网络 SVG
【发布时间】:2012-01-27 15:12:21
【问题描述】:

我有一个 SVG 文件,其中使用了一些特殊的(尽管是免费的)字体,我真的很想在 svg 文件显示在浏览器中时使用它们。

我试过了:

  • 添加 <style>@font-face 元素,指向绝对 URL,在 <defs></defs> 部分内添加所有可能的网络字体(eot、svg 等),但未成功
  • 将文档内svg字体格式本身的数据添加到<defs></defs>部分

但都没有成功。

有没有人知道如何实现这一点的方法?

P.S.:抱歉,如果我在错误的网站上提问,我无法确定这是编码问题还是设计问题。


编辑

我遇到了同样的问题,尽管尝试了几个小时我还没有找到解决方案。你可以在这里找到测试用例:http://editor.method.ac/font-files/test.html

测试用例在 Opera 中有效,在 Firefox 或 Chrome 中无效。没有测试过IE9。字体声明仅使用 woff 格式。

【问题讨论】:

  • 字体文件是否与您的 svg 文件在同一个域中?
  • 是的,但我使用 http://......./fontfile.svg 进行链接。
  • 添加了一个测试用例和一个赏金。

标签: fonts svg web font-face


【解决方案1】:

<img> 出于安全原因,文件必须完全独立,即它们不能引用任何外部文件。为了让 woff 字体在 Firefox 中的图像中工作,您需要将 woff 数据编码为数据 URL 并将其嵌入图像中。所以你可以使用url(data:application/octet-stream;base64,'d09GRg...而不是url(arvo-regular-webfont.woff)

有一个在线编码器here

【讨论】:

  • 啊废话,这违背了将 svg 用于轻量级图像的目的。嵌入字体很容易增加 50K。我想我会通过<object> 嵌入svg。
猜你喜欢
  • 1970-01-01
  • 2015-11-14
  • 1970-01-01
  • 1970-01-01
  • 2013-05-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-10-06
相关资源
最近更新 更多