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

Posted

技术标签:

【中文标题】在@font-face 规则中使用 svg 字体文件的确切语法是啥【英文标题】:What is the exact syntax for using svg font files in @font-face rules在@font-face 规则中使用 svg 字体文件的确切语法是什么 【发布时间】:2017-07-01 21:19:56 【问题描述】:

我正在尝试将新字体文件添加到我的网络应用程序。我找不到在 @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 文件,我需要在“#”之后添加什么。我很迷惑。非常感谢任何帮助。

【问题讨论】:

【参考方案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" 用于第二种字体)。

希望对您有所帮助!

【讨论】:

明白。非常感谢您的帮助。

以上是关于在@font-face 规则中使用 svg 字体文件的确切语法是啥的主要内容,如果未能解决你的问题,请参考以下文章

使用 @font-face 时 SVG node.getBBox 不正确

font-face 在 IE 中运行,但在 Firefox 中不运行 - 字体格式

css3中@font-face模块自定义字体

在 IE 中使用 @font-face 显示未设置样式的内容

@font-face 的离线字体转换器

网站优化之字体