如何在SVG中指定font-family

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,但是我使用它的任何语法都不起作用.到目前为止我试过:

• 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

出于安全原因，嵌入的 svg 图像必须是独立图像。您需要通过嵌入所有外部资源来使 svg 成为“独立”（在我们的例子中是字体定义）嵌入其中来使 svg 成为“独立”。要将字体嵌入到 svg 文件中，请按照下列步骤操作：

1. 生成内嵌字体url为base64

下载您想要在扩展名下使用的字体文件.ttf。我们需要嵌入数据 URI 方案。
将此字体文件上传到任何在线数据 URI 转换器，我正在使用dopiaza.org 数据 URI 生成器（或者您可以使用任何文件到 Base64 转换器工具，只要您遵循相同的数据 URI 生成模式）。

将字体文件上传到转换器。确保Use base64 encoding已检查。由于我们要嵌入字体，因此选择显式指定 mime 类型 并将 mime 类型设置为application/font-woff

点击“生成数据 URI”并让该工具完成工作，它应该为您提供以下数据 URI 格式：
data:<mime-type>;base64,<the_encoded_font_as_base64_content>

在我们使用字体作为 Mime-Type 的例子中，它将是：

data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....

2. 在 SVG 文件中声明嵌入字体

编辑使用该字体的 SVG 文件。在标签内声明@font-face。将上面生成的 data-uri URL 放入src: url("<generated_data_uri>")

<svg>
    <defs>
        <style>
            @font-face {
                font-family: Inter;
                src: url("data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....")
            }
        </style>
    </defs>

    <!-- The rest of your SVG content goes here -->
</svg>

Answer 3

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

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