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

Question

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

我可以直接使用网页字体(例如通过谷歌样式表:http://fonts.googleapis.com/css？family = Spicy + Rice),但TypeKit使用不同的基于javascript的加载策略将字体可用性应用于SVG对象.

这是可能的,如果是这样,我该怎么做呢？

谢谢!

Answer 1

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

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

注意IE<9可能会有问题，我对VML字体支持不太了解。IE9+ 支持 SVG，因此它应该可以与 SVG 以及所有其他现代[桌面]浏览器一起使用。

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

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