在@font-face 规则中使用 svg 字体文件的确切语法是什么

Question

我正在尝试将新字体文件添加到我的网络应用程序。我找不到在 @font-face 规则中添加 svg 文件的完美语法。我的字体规则是 scss 格式。以下是那些。

@font-face {
  font-family: "Brandon";
  src: asset_url("#{$font-reg}.eot");
  src:
    asset_url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
    asset_url("#{$font-reg}.woff2") format("woff2"),
    asset_url("#{$font-reg}.woff") format("woff"),
    asset_url("#{$font-reg}.ttf") format("truetype"),
    asset_url("#{$font-reg}.svg#svgFontName") format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Brandon";
  src: asset_url("#{$font-bold}.eot");
  src:
    asset_url("#{$font-bold}.eot?#iefix") format("embedded-opentype"),
    asset_url("#{$font-bold}.woff2") format("woff2"),
    asset_url("#{$font-bold}.woff") format("woff"),
    asset_url("#{$font-bold}.ttf") format("truetype"),
    asset_url("#{$font-bold}.svg#svgFontName") format("svg");
  font-weight: 700;
  font-style: normal;
}

对于上面的 svg 文件，我需要在“#”之后添加什么。我很迷惑。非常感谢任何帮助。

Answer 1

要查找在 # 之后放置的内容，您需要在文本编辑器中打开 SVG 文件并找到 <font id="someIdentifier"。

例如，Fontello 生成的 SVG 文件有以下行：

<font id="fontello" horiz-adv-x="1000">

这使得 @font-face 声明：

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot');
  src: url('../font/fontello.eot?#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2') format('woff2'),
       url('../font/fontello.woff') format('woff'),
       url('../font/fontello.ttf') format('truetype'),
       url('../font/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

#fontello 匹配 SVG 文件中该行中的 id 属性。您想匹配 SVG 文件中的任何 id。

如果您在 svg 文件中的 id 属性是 id="foobar"，那么您的属性将如下所示：

@font-face {
  font-family: "Brandon";
  src: asset_url("#{$font-reg}.eot");
  src:
    asset_url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
    asset_url("#{$font-reg}.woff2") format("woff2"),
    asset_url("#{$font-reg}.woff") format("woff"),
    asset_url("#{$font-reg}.ttf") format("truetype"),
    asset_url("#{$font-reg}.svg#foobar") format("svg");
  font-weight: 400;
  font-style: normal;
}

这是官方的W3C CSS Fonts Module Level 3 文档，引用了id 属性。如果您忘记添加标识符，那么它只会引用第一个定义的字体。

对于 SVG 字体，URL 指向一个元素 包含 SVG 字体定义的文档。如果元素引用是 省略，隐含对第一个定义字体的引用。相似地， 必须加载可以包含一种以上字体的字体容器格式 给定@font-face 规则的一种且只有一种字体。分段 标识符用于指示要加载的字体。如果一个容器 格式缺少定义的片段标识符方案，实现 应该使用简单的基于 1 的索引方案（例如“font-collection#1” 对于第一种字体，"font-collection#2" 用于第二种字体）。

希望对您有所帮助！