2015-01-04 28 views
0


我使用BrushScriptStd字体创建了SVG徽标。它在Chrome,Safari和Opera中显示效果很好,但是Firefox改变了字体,看起来真的很酷。有谁知道我该怎么办?

感谢您的帮助!
SVG不会在Firefox中加载网页字体

Here's的SVG代码

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="368.412px" height="181.334px" viewBox="0 0 368.412 181.334" enable-background="new 0 0 368.412 181.334" 
    xml:space="preserve"> 
<g id="fga3kg_1_" display="none"> 
</g> 
<g id="Capa_3"> 
    <polygon fill="#3373A9" points="129.496,132.001 317.226,132.001 367.401,0 179.671,0  "/> 
</g> 
<g id="Capa_2"> 
    <polygon fill="#84CAE2" points="1.01,181.334 161.01,181.334 208.302,31.334 48.303,31.334 "/> 
    <text transform="matrix(1 0 0 1 35.1562 113.834)" fill="#FFFFFF" font-family="'BrushScriptStd'" font-size="70">Cafe Blau</text> 
    <g id="qWsZ92_1_" display="none" opacity="0.25"> 
    </g> 
</g> 
</svg> 

here's嵌入SVG(HTML代码):

<svg width="300" height="160" viewBox="0 0 300 160"> 
    <image xlink:href="/Users/MaxRuizTagle/Desktop/guardado por illustrator/logoprobando.svg" src="" width="270" height="200"/> 
</svg> 

我haven't通过@字体面选项中指定的任何字体但..再次感谢您的帮助!

+0

根据[MDN](// developer.mozilla.org/docs/Web/SVG/Tutorial/SVG_fonts),SVG字体目前仅支持Safari和Android浏览器。 Internet Explorer [不考虑实施](// blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers。这个功能已经[从Chrome 38中移除](// www.chromestatus.com/feature/5930075908210688)(和Opera 25),Firefox已经[无限期推迟实现](// bugzilla.mozilla.org/show_bug。 cgi?id = 119490)专注于[WOFF](// developer.mozilla.org/en/WOFF)。 – Oriol

+0

我建议你使用字体图标 –

+0

这不是一个SVG字体问题,所以请忽略现有的评论/答案。这是使用Web字体的常规SVG文本。你如何包含字体(例如,你的'@ font-face'规则在哪里,你使用什么类型的字体文件)?更重要的是,你如何使用SVG代码?如果将SVG用作图像(''标记或CSS背景图像),则不会为其下载任何外部资源。涉及到网页字体时,Chrome和相关的浏览器往往对外部资源规则有点灵活,但Firefox不是。 – AmeliaBR

回答

0

Read about icon-fonts vs svg

I request you to use font-icon lisst of browser that supports font-icon


使用图标字体将被越来越多的相关性,因为更多的高分辨率/密度的显示器变得可用。

一个16×16像素的图标在高密度显示器(> 300ppi)上看起来可怕。由于自动缩放,它可能显示令人难以置信的小或不清晰。另一方面,1em字体图标将呈现正确和清晰,无论屏幕密度如何。

Tool to create font-icon