svg - 如何在 SVG 中指定字体系列

Question

我有这张 SVG 图片:

<text
     xml:space="preserve"
     style="font-size:18px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:'Arial;Sans';-inkscape-font-specification:'Arial;Sans';font-stretch:normal;font-variant:normal"
     x="11.764346"
     y="192.01521"
     id="text3607"
     sodipodi:linespacing="125%"><tspan
       sodipodi:role="line"
       id="tspan3609"
       x="11.764346"
       y="192.01521">PCI-E</tspan></text>

我使用inkscape在linux上编辑。它使用了 Windows 上不可用的字体“sans”。我想指定一个包含所有主要操作系统上可用字体的字体系列，但无论我使用什么语法都不起作用。到目前为止，我尝试过:

font-family:'Arial' - 适用于 windows

font-family:'Sans' - 适用于 linux

font-family:'Sans,Arial' - 损坏

font-family:'Sans;Arial' - 损坏

这个工作的正确语法是什么？我在 IE 和 Firefox 中渲染图片，两者似乎都有相同的问题。

这是图片的完整源代码: https://tools.wmflabs.org/paste/view/raw/c47ec7b8

Answer 1

为了更改 svg 中的字体系列，您应该首先在 svg 中的 defs 中导入字体，如下所示:

<defs>
    <style type="text/css">@import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Oswald|Raleway|Roboto|Indie+Flower|Gamja+Flower');</style>
</defs>

然后您可以使用内联样式或通过 javascript 更改字体系列

<text xmlns="http://www.w3.org/2000/svg" style="direction:rtl ;font-family:Gamja Flower" id="nametxt" class="text" transform="matrix(1 0 0 1 390 88.44)">text</text>

对于 javascript:

 svgTextNode.style.fontFamily=FontFamily