SVG、XML 和字体系列

Question

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

但没有指定如何构建字体堆栈，我尝试将以下 xml 代码视为 css（如一些建议的那样），但我没有运气。

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 它告诉我按照 http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-specification 关注 css 但是像 css (font-family:"Times New Roman",Times,serif;) 一样把它放进去是行不通的。

Answer 1

检查 Inkscape 生成的 xml 输出。 Inkscape 生成错误的字体系列值“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>          

Answer 2

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>