来自 W3.org 的嵌入字体示例的 SVG 图像不起作用

Question

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

这里是 link 官方 SVG 定义文章示例： https://www.w3.org/TR/SVGTiny12/fonts.html

这里是有问题的 SVG 示例文件的 link： 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>

它不起作用，这意味着图像已呈现，但字体错误，在：

Chrome诉 55.0.2883.87
Firefox 版本 47.0.2
Internet Explorer 10.0.9200 版
Opera v. 42.0
维瓦尔第 v.1.2.490.43

但是示例图像在旧版浏览器中正确呈现：

Opera 12.17 版
Safari 5.1.4 版
傲游 v.4.4.5.3000

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

引用外部文件

Answer 1

Firefox 从来不支持 SVG 字体，因为它们不适合世界上的许多文字，例如梵文。
IE 从来不支持 SVG 字体，因为它们没有广泛的浏览器支持。
Chrome dropped support for SVG fonts由于没有使用和以上两个原因。
Opera 在版本 12 之后从自己的渲染引擎转为使用 Chrome 的 Blink 渲染引擎，因此属于规则 3。
Vivaldi 也使用 Blink 作为渲染引擎
傲游使用Safari/Webkit作为渲染引擎。

没有主流浏览器支持或将支持 SVG 字体，SVG 2 规范已将其作为一项要求。 SVG glyphs in OpenType 等其他替代方案正在开发中。

您可以将 non-SVG 字体作为数据 URI 嵌入到图像中。

来自 W3.org 的嵌入字体示例的 SVG 图像不起作用

SVG image with embedded font example from W3.org doesn't work

css

fonts

svg

svg-font