Question

我正在尝试创建一个带有简单图形的SVG图像徽标，并且只使用非标准字体创建几个公司名称。为了节省大小，我决定只嵌入字词所需的字形，而不是指整个字体。但是使用自定义（嵌入）字体显示文本不。所以我在＆＃34;最重要的网站＆＃34;上找到了一个非常相似的例子。 - 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>

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

Chrome v.55.0.2883.87
Firefox v.47.0.2
Internet Explorer v.10.0.9200
Opera v.42.0
Vivaldi v.1.2.490.43

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

Opera v.12.17
Safari v.5.1.4
Maxthon v.4.4.5.3000

发生了什么？请建议如何使用嵌入字体可靠地创建SVG图像，而无需使用CSS参考外部文件。

Answer 1

Firefox从未支持SVG字体，因为它们不适合世界上许多脚本，例如梵文。
IE从未支持SVG字体，因为它们没有广泛的浏览器支持。
Chrome dropped support for SVG fonts由于缺乏使用而导致以上两个原因。
Opera从自己的渲染引擎转移到使用Chrome的Blink渲染引擎后，因此属于规则3。
Vivaldi还使用Blink作为渲染引擎
Maxthon使用Safari / Webkit作为渲染引擎。

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

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

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

1 个答案: