svg @ font-face在svg中工作，但不包括在页面中 [英] svg @font-face works in svg but not when included in a page
问题描述
我有一个svg文件，其中包含使用 @ font-face 语法的某种字体。此svg位于 /logo/logo-big-web.svg ，字体位于 /font/MDN/MDN.ttf 。
I've got an svg file which includes a certain font using the @font-face syntax. This svg is located at /logo/logo-big-web.svg and the font is in /font/MDN/MDN.ttf on the server.
当我打开时，一切正常工作http：//www.mywebsite/logo/logo-big-web .svg 在浏览器中正确加载字体并正确显示svg文件。
Everything works fine when I open http://www.mywebsite/logo/logo-big-web.svg in a browser the font loads properly and the svg file is displayed correctly.
但是，当我尝试将svg文件嵌入例如 index.html 中的html文件：
However, when I try to embed the svg file in a html file, for instance in index.html:
<img src="/logo/logo-big-web.svg" ... ></img>
当我打开 http：//www.mywebsite/index.html 在浏览器中，字体不能正确加载，并且svg显示一个丑陋的默认字体。
When I open http://www.mywebsite/index.html in a browser, the font does not load properly and the svg displays an ugly default font.
有没有人遇到过这个问题？
Has anyone else experienced this problem? How does one get around it?
我知道我可以在svg文件中嵌入字体为svg glyphs，但是这在Firefox中不起作用，并增加了很多内容svg的文件大小，而我正在加载字体无论如何使用在网页本身（似乎浪费加载字体两次）。因此，嵌入字形是没有选择。对于嵌入的数据：也是如此。
I know I could embed the font as svg glyphs inside the svg file, but this doesn't work in firefox and adds a lot to the filesize of the svg while I'm loading the font anyways for use on the webpage itself (it seems wasteful to load the font twice). So embedding the glyphs is no option. Same goes for embedded data: uri.
字体在svg文件中指定为：
The font is specified in the svg file as:
<defs>
<style>
@font-face {
font-family: MDN;
src: url("/font/MDN/MDN.ttf"); }
</style>
</defs>
，我使用它如下：
<text font-family="MDN" font-size="11"> <textPath ... > ... </textPath> </text>
更新2：
通过在单独的样式表中定义字体来规避问题，并包括如下：
Update 2:
I tried to circumvent the problem by defining the font in a separate stylesheet, and include it like this:
<?xml-stylesheet type="text/css" href="/style/slyle.css" ?>
但这似乎有同样的问题：它的工作原理，当我直接在浏览器中打开svg
（ http：//www.mywebsite/logo/logo-big-web.svg ）但是当我使用svg在html img 标签或作为html元素的背景。
But this seems to have the same problem: It works when I open the svg directly in a browser
(http://www.mywebsite/logo/logo-big-web.svg) but breaks down when I use the svg in a html img tag or as a background to a html element.
推荐答案
=http://stackoverflow.com/a/12585887/600545>这个回答相关问题，嵌入的 svg图片必须是独立的图片。如上面的注释中所提到的，可以通过将所有外部资产嵌入其中来使svg独立。所以在我的情况下，我不得不做这些事情之一：
According to this answer to a related question, embedded svg images have to be standalone images. As mentioned in the comments above, one can make an svg 'standalone' by embedding all external assets into it. So in my case, i'd have to do either one of these things:
- 使用数据嵌入字体uri ：
src：url（data：application / font-woff; base64，， - 将字体嵌入为svg字形，我已经排除了因为缺少firefox支持
- >
- embed the fonts using a data uri:
src: url("data:application/font-woff;base64,<base64 encoded font here"), - embed the fonts as svg glyphs, which I had already ruled out because the lack of firefox support
- turn the fonts into paths in my editing software (e.g. expand path in adobe illustrator).
在我的编辑软件中，令人满意的，因为我真的很想保持svg文件尽可能轻量级。
Not one of these methods seemed satisfactory, since I really like to keep the svg files as lightweight as possible.
另一个解决整个问题的解决方案是使用一个html 标记，而不是 img 标记。这样，svg被允许超过一个独立的图像，并且它可以使用全范围的xml包含方法来包括其他资产。 上述问题已经指出了这一点。
Another solution to circumvene the whole problem is to use a html object tag instead of an img tag. This way the svg is allowed to be more than a standalone image and it can use the full range of xml inclusion methods to include other assets. This was pointed out already in the aforementioned question.
我选择使用嵌入svg的对象方法。我会更新这个答案，如果我发现有一些根本的错误这样做而不是使用一个合适的 img 元素。
I chose to use the object method of embedding the svg. I'll update this answer if I find out there is something fundamentally wrong with doing this instead of using a proper img element.
这篇关于svg @ font-face在svg中工作，但不包括在页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
