在嵌入 HTML 页面的 SVG 对象中使用 Adobe TypeKit 字体答案

【问题标题】：Use Adobe TypeKit fonts in an SVG object embedded in an HTML page在嵌入 HTML 页面的 SVG 对象中使用 Adobe TypeKit 字体
【发布时间】：2013-09-12 10:54:45
【问题描述】：

如何在嵌入 HTML 页面的 SVG 对象中使用 Adobe TypeKit 中的字体？

我可以直接使用网络字体（例如通过 google 样式表：http://fonts.googleapis.com/css?family=Spicy+Rice），但 TypeKit 使用不同的基于 javascript 的加载策略，它似乎没有将字体可用性应用于 SVG 对象。

这可能吗？如果可以，我该怎么做？

谢谢！

【问题讨论】：

你联系过 typekit 的维护者吗？
不，还没有。不过，我确实找到了一个骇人听闻的解决方法；您可以在加载后从 html DOM 中获取样式表，然后将其应用于 SVG。更好的修复之一可能是 TypeKit 添加对直接从 SVG 文件运行脚本的支持。
我询问了 Typekit/Adobe，他们说他们没有对 SVG 文件进行太多测试，但注意到我要求提供此类支持。
您是如何从 html DOM 应用样式表并将其应用到 SVG 的？
@AndrewSwift - 我认为你必须在 SVG 中通过

标签： javascript html css svg webfonts

【解决方案1】：

SVG 可以使用 CSS 样式表来设置样式，因此您应该能够以这种方式应用它。

并且只要在页面上注册了字体，就可以使用textElToApplyFontTo.attr({ "font-family": "myFont" });

注意IE

需要考虑的重要一点是 Typekit 和其他基于 JS 的加载机制异步工作，因此字体只有在加载后才可用。

一些现代浏览器不会加载字体，除非 DOM 元素正在使用它，因此这也可能会导致问题（您可以尝试通过在 DOM 元素上使用它来加载字体，最好是在 SVG 文件上方。A肮脏的把戏，但它有效......）。

【讨论】：

我不反对答案，但这是不正确的。 CSS 规则不会级联到 <object> 元素。这些对 CSS 规则是完全不透明的。 CSS 规则仅适用于内联 SVG。
我并不是说您可以对 HTML 和 SVG 使用相同的 CSS 规则。我建议一种更快地加载字体并使它们可用于 SVG 对象的方法。我为造成的误解道歉。感谢您不反对我的回答。
酷。答案现在很有意义。