在svg中使用系统字体

时间:2018-02-25 18:39:20

标签: css svg inkscape

我有一个从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>

1 个答案:

答案 0 :(得分:1)

你不必嵌入字体。您必须转换为概述徽标内的文本,以便它将成为正常的矢量形状,并且它将不再是可编辑的文本。