Question

我使用svg格式的自定义字体（DimaBarf.ttf）构建徽标。这是我的代码：

<svg width="276.7" height="93" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css">
            @font-face {
                font-family: Barf;
                src: url('./DimaBarf.ttf');
            }
        </style>
    </defs>
    <g>
        <title>background</title>
        <rect fill="#fff" height="93" width="276.7" y="0" x="0"/>
    </g>
    <g>
        <title>Layer 1</title>
        <rect rx="10" height="65" width="276.5" y="0" x="0" fill="#867965"/>
        <text stroke="#000" transform="matrix(4.871815023846745,0,0,5.305484790354967,-1448.1636560162676,-511.74044508859515)" xml:space="preserve" text-anchor="first" font-family="Barf" font-size="24" y="110.4" x="297" stroke-width="0" fill="#d8c7b3">شینکاف</text>
    </g>
</svg>

当我打开svg文件时，它会正确显示我的自定义字体。

但是当我在HTML文档中添加此svg时，我的自定义字体更改为默认系统字体。这是我的html格式代码：

<div style="width:300px;">
    <img src="./data/pictures/logo.svg" alt="logo" class="mx-auto d-block" width="100%" />
</div>

svg中正确的字体，但html中错误

0 个答案: