Question

我有这张SVG图片：

ICC 15.0

我使用inkscape在linux上编辑。它使用了Windows上没有的字体“sans”。我想指定一个包含所有主要操作系统上可用字体的font-family，但是我使用它的任何语法都不起作用。到目前为止我试过了：

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

Answer 2

似乎问题是我用引号括起来了。正确的语法（或者至少对我有用）：

font-family:Sans,Arial;（没有引号）

Answer 3

如果需要声明全局样式，可以使用以下语法：

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

Answer 4

就我而言，我正在将SVG转换为base64。

使用font-family =“ Arial，无衬线；”没有工作，但是当我删除“;”时最后一部分是分号，瞧！它起作用了。

如何在SVG中指定font-family

4 个答案: