【发布时间】：2015-01-05 11:30:23
【问题描述】：
我用 BrushScriptStd 字体创建了一个 SVG 标志。它在 Chrome、Safari 和 Opera 中显示良好，但 Firefox 更改了字体，看起来真的很糟糕。有谁知道我应该怎么做？
感谢您的帮助！
这是 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>
这是嵌入的 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>
我还没有通过@font-face 选项指定任何字体。再次感谢您的帮助！
【问题讨论】：
-
根据MDN，SVG 字体目前仅在 Safari 和 Android 浏览器中支持。 Internet Explorer doesn't consider the implementation，此功能已被 removed from Chrome 38（和 Opera 25）和 Firefox 有 postponed implementation indefinitely 专注于 WOFF。
-
我建议你使用字体图标
-
这不是 SVG 字体问题，因此请忽略现有的 cmets/answers。这是使用网络字体的常规 SVG 文本。您如何包含字体（例如，您的
@font-face规则在哪里，您使用的是什么类型的字体文件）？更重要的是，您如何使用 SVG 代码？如果 SVG 用作图像（<img>标签或 CSS 背景图像），则不会为其下载任何外部资源。 Chrome 和相关浏览器在涉及 web 字体时往往对外部资源规则有点灵活，但 Firefox 不是。 -
谢谢AmeliaBR！..我用上面的svg html代码更新了我的问题..我还没有用\@font-face指定任何字体..如果我用\@font-包含字体面对 SVG 文本会解决问题吗？像这样？ \@font-face{ font-family：画笔脚本标准； src:url(brushscriptstd.otf); }
-
您需要使用@font-face 添加它，并且url不能是外部文件，即brushscriptstd.otf不起作用，它需要是包含brushscriptstd内容的数据url .otf