在 svg 中使用系统字体

Question

我有一个从 Inkscape 创建的徽标，徽标中使用的字体已安装在本地系统中。

在其他系统中，该字体可能不存在。我想嵌入字体并在 svg 中使用该字体。我已经试过了，但没有成功，我做错了什么？

<style type="text/css"><![CDATA[
    @font-face {
        font-family: "Bahamas";
        src: url("../fonts/Bahamas.ttf") format("ttf");
        font-weight: normal;
        font-style: normal;
    }

  ]]></style>

我试过像这样使用 <defs> 标签

    <defs>
        <style type="text/css">
            @font-face {
                font-family: 'Bahamas';
                src: url('../fonts/Bahamas.ttf');
                font-weight: normal;
                font-style: normal; }
        </style>
    </defs>

这是文件中 svg 的一部分

<text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:9.35660839px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.23391519"
       x="64.662544"
       y="31.874653"
       id="text3701"
       transform="scale(1.0383014,0.96311149)">
    <tspan
         sodipodi:role="line"
         x="64.662544"
         y="31.874653"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:19.96076584px;font-family:Bahamas;-inkscape-font-specification:'Bahamas, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0.81870329px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;stroke-width:0.23391519"
         id="tspan3715">
        <tspan
           id="tspan84"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:19.96076584px;font-family:Bahamas;-inkscape-font-specification:'Bahamas, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0.81870329px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;stroke-width:0.23391519"
           dy="5.8478818">
            <tspan
             style="fill:#8ec622;fill-opacity:1;stroke-width:0.23391519"
             id="tspan92">Fair</tspan>
            <tspan
             style="fill:#2d7cad;fill-opacity:1;stroke-width:0.23391519"
             id="tspan96"
             dx="0 -1.2995973 0.43319905">Tex</tspan>
        </tspan>
    </tspan>
    <tspan
         sodipodi:role="line"
         x="64.662544"
         y="47.458599"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.98038292px;font-family:Bahamas;-inkscape-font-specification:'Bahamas, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:1.13448882px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;stroke-width:0.23391519"
         id="tspan86" />
</text>

Answer 1

您不必嵌入字体。您必须将徽标内的文本转换为轮廓，这样它才能变成普通的矢量形状，并且不再是可编辑的文本。

Answer 2

你不说，但我假设你将 SVG 用作独立文件，并将其嵌入 <img> 或 background-image 等

最简单的解决方案是将文本转换为轮廓。在 Inkscape 中使用 "Path -> Object to path"。

如果出于某种原因，您更愿意继续使用字体文件，那么您将需要将字体嵌入到 SVG 本身中。这是因为使用 <img> 等包含的 SVG 必须是 self-contained，而不是引用其他文件。有关更多信息，请参阅 this question。

在 svg 中使用系统字体

Using system font in svg

css

svg

inkscape