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;
}

在＆＃39;＃＆＃39;之后我需要做什么？对于上面的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;
}

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

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

希望这有帮助！

在@ font-face rules

1 个答案: