1

我正在尝试使用非标准字体创建一个带有简单图形且只有几个公司名称单词的 SVG 图像徽标。为了节省大小，我决定只嵌入单词所需的字形，而不是引用整个字体。但是没有使用自定义（嵌入）字体显示文本。所以我在“最重要的网站”——W3.org 上找到了一个非常相似的例子，令我惊讶的是，他们的例子在大多数现代浏览器中也不起作用。

这是带有示例的官方 SVG 定义文章的链接： https ://www.w3.org/TR/SVGTiny12/fonts.html

这是相关 SVG 示例文件的链接： https ://www.w3.org/TR/SVGTiny12/examples/font01.svg

这是文件中的代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" viewBox="0 0 160 70"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Font example</title>
    <defs>
      <font horiz-adv-x="313" xml:id="la">
        <metadata>Converted from Larabie Anglepoise by Batik ttf2svg
           See http://www.larabiefonts.com/ </metadata>
        <font-face font-family="larabie-anglepoise" units-per-em="1000" 
           panose-1="0 0 4 0 0 0 0 0 0 0" ascent="703" descent="-300" alphabetic="0"/>
        <missing-glyph horiz-adv-x="500" d="M63 0V700H438V0H63ZM125 63H375V638H125V63Z"/>
        <glyph unicode="S" glyph-name="S" horiz-adv-x="385" d="M371 1H29V144H264Q264 151
           264 166Q265 180 265 188Q265 212 249 212H132Q83 212 55 247Q29 279 29
           329V566H335V422H136V375Q136 360 144 356Q148 355 168 355H279Q327 355 352
           309Q371 273 371 221V1Z"/>
        <glyph unicode="V" glyph-name="V" horiz-adv-x="351" d="M365 563L183 -33L0 
           563H101L183 296L270 563H365Z"/>
        <glyph unicode="G" glyph-name="G" horiz-adv-x="367" d="M355
           1H18V564H355V420H125V144H248V211H156V355H355V1Z"/>
        <hkern g1="V" g2="G" k="-40"/>
      </font>
    </defs>
    <text x="40" y="50" font-family="larabie-anglepoise" font-size="70"
          fill="#933">SVG</text>
    <rect x="00" y="00" width="160" height="70" stroke="#777" fill="none"/>
</svg>

它不起作用，这意味着图像被渲染，但使用了错误的字体，在：

  • 铬诉 55.0.2883.87
  • 火狐浏览器 v. 47.0.2
  • Internet Explorer v. 10.0.9200
  • 歌剧 v. 42.0
  • 维瓦尔第诉 1.2.490.43

然而，示例图像在旧浏览器中正确呈现：

  • 歌剧诉 12.17
  • Safari v. 5.1.4
  • 傲游诉 4.4.5.3000

这是怎么回事？请建议我如何可靠地创建带有嵌入字体的 SVG 图像，而不使用 CSS 引用外部文件。

4

1 回答 1

2

  1. Firefox 从未支持 SVG 字体，因为它们不适合世界上的许多脚本，例如梵文。

  2. IE 从不支持 SVG 字体，因为它们没有广泛的浏览器支持。

  3. 由于缺乏使用和上述两个原因，Chrome放弃了对 SVG 字体的支持。

  4. Opera 在版本 12 之后从自己的渲染引擎转移到使用 Chrome 的 Blink 渲染引擎，因此属于规则 3。

  5. Vivaldi 还使用 Blink 作为渲染引擎

  6. Maxthon 使用 Safari/Webkit 作为渲染引擎。

没有主流浏览器支持或将支持 SVG 字体，并且 SVG 2 规范已将它们作为一项要求删除。其他替代品，例如OpenType 中的 SVG 字形，正在研究中。

您可以将非 SVG 字体嵌入为数据 URI，使其在图像中工作。

于 2017-01-22T08:43:06.753 回答