html - 为什么包含字形时 svg 文件不显示正确的字体？

Question

我有一个未正确显示字体的 svg 文件。我正在尝试显示两个字符。我在字体描述中包含了字形。字体说明如下。

<font horiz-adv-x="1000">
<!-- Copyright (C) Avid Technology, Inc. 1987-2010 -->
<!-- Copyright: Copyright 2014 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="OpusText" units-per-em="1000" underline-position="-123" underline-thickness="20"/>
<missing-glyph horiz-adv-x="500"/>
<glyph unicode="#" horiz-adv-x="360" d="M239,371l-105,-35l0,-189l105,35M266,634l0,-156l56,19l0,-100l-56,-18l0,-189l56,18l0,-99l-56,-19l0,-170l-27,0l0,162l-105,-34l0,-163l-27,0l0,155l-57,-19l0,100l57,18l0,189l-57,-18l0,99l57,19l0,171l27,0l0,-163l105,34l0,164z"/>
<glyph unicode="b" horiz-adv-x="321" d="M50,635l35,0l-8,-316C100,356 134,375 179,375C194,375 209,372 224,367C239,361 252,353 263,343C274,333 283,321 290,308C297,294 300,279 300,263C300,240 293,218 279,196C264,173 245,151 222,129C199,106 172,84 142,61C112,38 81,14 50,-10M151,330C136,330 123,327 114,320C104,313 96,304 91,293C85,282 81,269 79,256C76,242 75,228 75,215l0,-47C75,111 77,73 81,54C95,64 110,78 126,96C141,114 155,133 168,154C181,174 191,194 200,215C208,235 212,253 212,268C212,285 206,299 195,312C183,324 168,330 151,330z"/>

文本调用如下。

       <text transform="matrix(1 0 0 1 25 40)"><tspan   font-family="'OpusText'" font-size="25">#</tspan><tspan  font-family="'OpusText'" font-size="25">b</tspan></text>

文本应该看起来像以下路径。它们是字形的形状。

<g transform="translate(0,50)">
     <path d="M39.137,24.426v3.9l1.4-0.475v2.5l-1.4,0.45v4.726l1.4-0.45v2.476l-1.4,0.475v4.25h-0.675v-4.05l-2.625,0.85v4.075h-0.675
    v-3.875l-1.425,0.475v-2.5l1.425-0.449v-4.726l-1.425,0.451v-2.476l1.425-0.475v-4.275h0.675v4.075l2.625-0.85v-4.1H39.137z
     M38.462,31.001l-2.625,0.875v4.726l2.625-0.875V31.001z"/>
     <path d="M42.736,24.401h0.875l-0.2,7.9c0.583-0.933,1.434-1.4,2.55-1.4c0.383,0,0.758,0.071,1.125,0.212
    c0.366,0.142,0.691,0.337,0.975,0.587c0.283,0.25,0.508,0.546,0.675,0.888c0.166,0.342,0.25,0.712,0.25,1.112
    c0,0.567-0.18,1.13-0.537,1.688c-0.359,0.559-0.83,1.117-1.413,1.675c-0.583,0.559-1.25,1.125-2,1.7s-1.517,1.163-2.3,1.763V24.401
    z M45.261,32.026c-0.383,0-0.696,0.087-0.938,0.263c-0.242,0.175-0.434,0.4-0.575,0.675c-0.142,0.274-0.242,0.584-0.3,0.925
c-0.059,0.342-0.087,0.68-0.087,1.013v1.175c0,1.434,0.05,2.384,0.15,2.851c0.35-0.25,0.721-0.601,1.113-1.051
c0.391-0.449,0.746-0.929,1.063-1.438c0.316-0.508,0.579-1.016,0.787-1.524s0.313-0.954,0.313-1.338
    c0-0.416-0.146-0.779-0.438-1.088C46.057,32.18,45.694,32.026,45.261,32.026z"/></g>

这是一个 jsfiddle，显示未显示字体，而是一些随机的未知字体。 http://jsfiddle.net/AU3MH/7/

关于为什么不显示字体的任何想法？我正在运行 Windows 7 和 Internet Explorer 版本 11。谢谢，--克里斯托弗

Answer 1

Internet Explorer 11 does not support SVG Fonts所以您看到的只是普通的 TrueType 字形。