如何在 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
字体系列：'Sans,Arial' - 损坏
字体系列：'Sans;Arial' - 损坏

正确的语法是什么？我是用IE和Firefox渲染的，好像都是一样的问题

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

Answer 1

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

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

Answer 2

为了更改 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 3

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

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

Answer 4

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

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

Answer 5

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

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

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

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

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

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

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>

如何在 SVG 中指定字体系列

How to specify font-family in SVG

fonts

svg

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

2。在我们的 SVG 文件中声明嵌入字体