在@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 中不运行 - 字体格式