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通过@字体面选项中指定的任何字体但..再次感谢您的帮助!
根据[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
我建议你使用字体图标 –
这不是一个SVG字体问题,所以请忽略现有的评论/答案。这是使用Web字体的常规SVG文本。你如何包含字体(例如,你的'@ font-face'规则在哪里,你使用什么类型的字体文件)?更重要的是,你如何使用SVG代码?如果将SVG用作图像(''标记或CSS背景图像),则不会为其下载任何外部资源。涉及到网页字体时,Chrome和相关的浏览器往往对外部资源规则有点灵活,但Firefox不是。 – AmeliaBR