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

我想将新的字体文件添加到我的web应用程序中。我无法找到在@ font-face规则中添加svg文件的完美句法。我的字体规则采用scss格式。下面是这些。在@ font-face规则中使用svg字体文件的确切语法是什么

@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文件的'＃'之后放置什么。我很困惑。任何帮助，高度赞赏。

来源

2017-02-13 user3155497

要找到要放在#后面的内容，您需要在文本编辑器中打开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”）。

希望有帮助！了解。

来源

2017-02-13 19:17:29

了解。非常感谢你的帮助。 – user3155497

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

回答

相关问题