我有一个包含某种字体的svg文件,使用@font-face
语法。这个svg文件位于服务器上的/logo/logo-big-web.svg
,而字体则在/font/MDN/MDN.ttf
中。
当我在浏览器中打开http://www.mywebsite/logo/logo-big-web.svg
时,一切都正常工作,字体正确加载,svg文件正确显示。
然而,当我尝试将svg文件嵌入到一个html文件中,例如index.html
:
<img src="/logo/logo-big-web.svg" ... ></img>
当我在浏览器中打开http://www.mywebsite/index.html
时,字体无法正确加载,svg 显示了丑陋的默认字体。
是否有其他人遇到过这个问题?如何解决?
我知道我可以将字体作为 svg 字形嵌入到 svg 文件中,但这在 Firefox 中不起作用,并且会增加 svg 文件的文件大小,而我仍然要为网页本身加载字体(看起来很浪费)。因此,嵌入字形不是选择。对于嵌入的 data:
uri,情况也是一样的。
更新:
字体在 svg 文件中指定为:
<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:
我试图通过在单独的样式表中定义字体并像这样包含它来规避问题:
<?xml-stylesheet type="text/css" href="/style/slyle.css" ?>
但是这似乎有相同的问题:当我直接在浏览器中打开svg文件时,它可以工作(http://www.mywebsite/logo/logo-big-web.svg
),但是当我将svg用作html img
标签或作为html元素的背景时,它会出现错误。
url("/font/MDN/MDN.ttf")
。如果我没记错的话应该可以工作吧? - romeovs