html - SVG 图像在 Safari 中不显示正确的字体

Question

我的网站上有一个 svg 图像，但由于某种原因，它在 Safari 浏览器中没有显示正确的字体类型。在其他浏览器中没问题。对于同样的问题，文本被截断。 我该如何解决这个问题？ SVG 如下:

<svg xmlns="http://www.w3.org/2000/svg" width="782.167" height="353.653" viewBox="0 0 782.167 353.653" style="&#10;    background: rebeccapurple;&#10;">
<g id="lading-title" transform="translate(-255 -239.623)">
    <text id="FIRST_ID" data-name="HERO TITLE" transform="translate(503.537 520.276)" fill="#fff" font-size="45" font-family="Barlow-Black, Barlow" font-weight="800" letter-spacing="0.065em">
        <tspan x="0" y="45">MY TEXT HERE</tspan>
    </text>
    <text id="SECOND_ID" transform="translate(873.167 300.276)" fill="#fff" font-size="45" font-family="Barlow-Black, Barlow" font-weight="800" letter-spacing="0.065em">
        <tspan x="0" y="45">TEXT</tspan>
    </text>
</g>

在我的网站上，我按以下方式使用它，因为它是一个带有 WordPress 的网站:

<img src = "/img/hero-title.svg" class = "vc_single_image-img attachment-full" alt = "" loading = "lazy" height = "353.653" width = "782.167">

我看到 svg 的一部分包含 font-family = "Barlow Black" 但我不知道为什么它在 Safari 中不起作用。我尝试从 css 添加 font-family 到它，其 Id 具有该部分文本，但它不起作用

Answer 1

您是否尝试过将字体系列插入 .svg 文件中的样式标记内，如下所示:

@font-face {
    font-family: 'Barlow-Black';
    src: url('../Fonts/barlow-black.ttf');
    }

您可以免费下载该字体并将该字体作为 .ttf 文件添加到您的解决方案中。 [https://fonts2u.com/barlow-black.font] (src属性具有解决方案中字体的路径)