SVG、XML 和字体系列

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';

编辑 我也从w3找到了这个 http://www.w3.org/TR/SVG/text.html#FontPropertiesUsedBySVG 它告诉我遵循 css，按照 http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-specification 但像 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>

或者更好的是，使用类:

<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>