ios safari 不会在 svg 文件中显示 font-face 嵌入字体。有什么解决办法吗？

发布于 2024-10-20 12:12:48 字数 737 浏览 1 评论 0原文

所以我有一个包含文本元素的 SVG 文件。示例：

<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'LeagueGothic'" font-size="24">Europe</text>

当我将字体系列指定为 iOS 中包含的内容（如 Helvetica 或 Futura）时，一切正常。然而，一旦我通过 @font-face 指定了包含的字体，它就无法在 iOS 上工作，而在桌面版 Safari、Chrome、Firefox 以及 Opera 上却可以。

否则 @font-face 字体在整个页面中都可以正常工作，除了 SVG 部分。

尝试将 SVG 文件包含为、

我使用的是 iOS 4.2。尝试过 SVG 1.1、1.1 Tiny、1.2 等，都一样。

这是一个错误还是我错过了什么？谢谢。

示例 SVG 文件位于：http://pastie.org/1637291

原文

So I have a SVG file, that contains text elements. Example:

<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'LeagueGothic'" font-size="24">Europe</text>

When I specify the font-family to something included in iOS (like Helvetica or Futura), everything works fine. However, once I specify a font included through @font-face, it simply doesn't work on iOS, while it does on desktop Safari, Chrome, Firefox as well as Opera.

Otherwise @font-face fonts work ok throughout the page, except the SVG parts.

Tried including the SVG file as <embed>, <object> and <img>, didn't help. Interestingly, when I try inline SVG (i.e. SVG code directly within HTML), then the fonts are ok, but it doesn't draw anything else form the SVG file.

I am on iOS 4.2. Tried SVG 1.1, 1.1 Tiny, 1.2, etc. all the same.

Is this a bug or am I missing something, please? Thanks.

Sample SVG file here: http://pastie.org/1637291

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

筱武穆 2024-10-27 12:12:48

您的 svg 示例没有 @font-face 规则，也没有对任何外部样式表的引用。也许解决方案是在 svg 文件本身中包含具有该定义的样式表。

例如：

<style>
@font-face { font-family: foo; src: url(somefont.svg#theFontElementId) format("svg"); }
</style>

如果您使用

Your svg sample has no @font-face rule, nor references to any external stylesheets. Maybe a solution could be to include a stylesheet with that definition in the svg file itself.

For example:

<style>
@font-face { font-family: foo; src: url(somefont.svg#theFontElementId) format("svg"); }
</style>

If you are referencing the svg parts with e.g <object>, <embed>, <iframe> or <img> and see the webfont elsewhere on the page then that missing stylesheet thing could be the cause.

回复收藏 0 原文

~没有更多了~