如何在 SVG 中指定字体系列答案

【问题标题】：How to specify font-family in SVG如何在 SVG 中指定字体系列
【发布时间】：2015-07-13 12:46:57
【问题描述】：

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

【问题讨论】：

标签： svg fonts

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：

您可以引用单个字体。事实上，对于名称中带有空格的字体，您将需要它，例如“Museo Sans”。但是，您不应在整个列表中加上引号。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

在我的例子中，我将 SVG 转换为 base64。

使用 font-family="Arial, sans-serif;"没有工作，但是当我删除“;”最后一部分的分号，瞧！成功了。

【讨论】：

【解决方案5】：

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

1。将嵌入的字体 url 生成为 base64

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

将字体文件上传到转换器。确保选中Use base64 encoding。由于我们要嵌入字体，所以选择 Explicitly specified mime type 并将mime类型为application/font-woff

点击 Generate Data 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>

【讨论】：