Question

我希望能够获得有关在SVG中格式化文本的最佳方法的更多信息 w3提供了这个 http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#text_methods

但是没有说明我如何构建一个字体堆栈，我已经尝试过像css一样处理下面的xml代码（正如一些建议的那样），但我没有运气。

font-family:Times New Roman;
-inkscape-font-specification:Times New Roman

问题。如何根据css为svg构建字体堆栈？

（我对font-face或svg字体不太感兴趣，因为我相信我所读到的内容目前还没有得到广泛的支持。）

我试图在xml中格式化这些模式中的文本，但没有运气;

 font-family:Verdana,Times New Roman;
 font-family:'Verdana,"Times New Roman"';
 font-family:Verdana,"Times New Roman";
 font-family:'Verdana,Times New Roman';

EDIT 我也从w3中找到了这个 http://www.w3.org/TR/SVG/text.html#FontPropertiesUsedBySVG 它告诉我按照http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-specification跟随css 但是把它放进去像css（font-family：“Times New Roman”，Times，serif;）不起作用。

Answer 1

font-family属性与CSS定义的属性相同，因此您可以根据需要指定字体堆栈。

使用属性的示例：

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="100" 
   font-family="'Times New Roman', Times, serif" font-size="48">
    Some text
  </text>
</svg>

或更好，使用class：

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .seriftext {
      font-family: 'Times New Roman', Times, serif;
      font-size: 48px;
    }
  </style>
  <text x="10" y="100" class="seriftext">
    Some text
  </text>
</svg>

Answer 2

检查Inkscape生成的xml输出。 Inkscape生成一个错误的font-family值“font-family：Sans”。我猜这应该是“Sans-Serif”，但是在短划线上被截断了。此值附加到样式字符串的末尾，因此在文本编辑器中查看xml时可能看不到它。如果您编辑样式字符串以放置自己的字体系列定义但不删除不正确的定义（因为您还没有看到它），则不会发生任何变化。

 <!--this wont work. Two font-family specs (scroll to the end).-->       
    style="font-family:arial,sans-serif;font-size:40px;font-style:normal;font-family:Sans"

    <!--this wont work either. Well you'll get the default Serif font-->
    style="font-family:Sans;font-size:40px;font-style:normal;font-weight:normal;"

    <!--this will work-->
    style="font-family:arial,sans-serif;font-size:40px;font-style:normal;font-weight:normal;"

    <!--so will this-->
    style="font-family:Arial,Sans-Serif;font-size:40px;font-style:normal;font-weight:normal;"

    <!--and this-->
    style="font-family:tahoma,arial,Sans-Serif;font-size:40px;font-style:normal;font-weight:normal;"

 <!--this too-->
style="font-family:Times New Roman, Serif;font-size:40px;font-style:normal;font-weight:normal;"

示例：

<text
   style="font-family:Times New Roman, Serif;font-size:40px;font-style:normal;font-weight:normal;">
    <tspan
     x="60"
     y="60">
    The rain in spain
    </tspan>
</text>

SVG，XML＆amp;字体系列

2 个答案: