有没有办法在 SVG 文件中嵌入 Google Web Font 脚本？
Posted
技术标签:
【中文标题】有没有办法在 SVG 文件中嵌入 Google Web Font 脚本？【英文标题】：Is there any way to embed a Google Web Font script in an SVG file? 【发布时间】：2012-01-25 17:34:01 【问题描述】：我是 SVG 的新手，刚刚在 Illustrator 中制作了我的第一张像样的图形。我已经将它嵌入到一个页面中（使用<embed>标签），在<head>标签中使用Ubuntu字体的Google Web字体脚本，但事实证明，Ubuntu字体在常规文本中正确显示，但是对于要在 SVG 中使用这个技巧，Google 脚本必须嵌入到 SVG 本身中。如何才能做到这一点？
Here's a link 到有问题的 SVG 文件。
【问题讨论】：
【参考方案1】：这是example 在 SVG 中使用几种不同的网络字体。
google web fonts 提供的当前版本的脚本在 svg 中不起作用。不过，谷歌很容易修复。
以下是一些在 svg 中使用谷歌网络字体和提到的其他方法的示例：
with @import with <link> element with an xml-stylesheet processing instruction【讨论】：
为什么谷歌让它的网络字体脚本与 SVG 兼容毫无意义？ 一点也不无意义，我认为如果 google 字体脚本适用于 svg 和 html 之类的，那将非常有帮助。它也没有将 xml-stylesheets 列为包含字体的一种方式。【参考方案2】：我认为这对于链接的 SVG 尚不适用，例如 here is the Firefox bug。如果你 inline the SVG in the HTML 然后创建这样的 CSS 规则，它确实有效：
svg .text
font-family:"Familiar Pro Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight:bold;
font-style:normal;
当然，这只适用于支持 HTML5 的浏览器。 Here's an example.
【讨论】：
以上是关于有没有办法在 SVG 文件中嵌入 Google Web Font 脚本？的主要内容，如果未能解决你的问题，请参考以下文章
将 Google 字体与 SVG <object> 结合使用
在 PDF 中嵌入 SVG（使用 JS 将 SVG 导出为 PDF）