提问者:小点点

如何在SVG中指定字体系列


我有一张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>

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

  • 字体系列:“Arial” - 适用于窗口
  • font-family:“Sans” - 适用于Linux
  • 字体系列:“Sans,Arial” - 破碎
  • 字体家族:“Sans;阿里亚尔' - 破碎

正确的语法是什么?我在IE和Firefox中渲染图片,两者似乎都有相同的问题。


共3个答案

匿名用户

为了在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

匿名用户

问题似乎是我用引号包装了它。正确的语法(或者至少它对我有用):

< code >字体系列:Sans,Arial(无引号)

匿名用户

如果我们需要声明全局样式,我们可以使用以下语法:

<svg width="100" height="100"
    xmlns="http://www.w3.org/2000/svg">
    <style>
        text {
            font-family:Roboto-Regular,Roboto;
        }
    </style>
    ...
</svg>