0

我在我的 html 中使用了这个 svg：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
        <circle cx="15" cy="15" r="15" stroke="#BBD1DD" stroke-width="2"/>
        <text fill="#F83A32" font-family="FiraSans-Medium, Fira Sans" font-size="14" font-weight="400">
            <tspan x="12" y="19">1</tspan>
        </text>
    </g>
</svg>

请注意，我可能有大约 100 个这样的 svg，从设计师那里收到它们，并且不断变化，我收到新的并且必须更换旧的

现在的问题：

FiraSans-Medium该名称不存在字体系列/名称。

因此，图标呈现错误的字体。

可能正确的字体是 Fira Sans，重量为 500。

我包括这样的字体：

  <link href="https://fonts.googleapis.com/css?family=Exo+2:200,500|Fira+Sans:300,300i,400,400i,500" rel="stylesheet">

现在有没有一种简单的方法来重新映射字体，这样我就不必手动编辑数百个 svg 文件并且每次都更改？

4

1 回答 1

2

您引用的文件只不过是一个样式表。您可以下载该文件并从您自己的服务器包含它，重写使用的名称：

/* ...more @font-face rules... */
@font-face {
  font-family: 'Fira Sans'; /* replace with 'FiraSans-Medium' */
  font-style: normal;
  font-weight: 500;
  src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v8/zM2u8V3CuPVwAAXFQcDi4Ogdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

顺便说一句：虽然FiraSans-Medium在样式表中列为 的本地名称font-weight="500"，但font-weight="400"在 svg 中定义的名称在此处列为FiraSans-Regular。但是，您将不得不与您的设计师讨论。

于 2017-10-23T19:25:19.643 回答