CSS SASS 和@font-face
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1567184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SASS and @font-face
提问by Dycey
I have the following CSS - how would I describe it in SASS? I've tried reverse compiling it with css2sass, and just keep getting errors.... is it my CSS (which works ;-) )?
我有以下 CSS - 我将如何在 SASS 中描述它？我试过用 css2sass 反向编译它，只是不断出现错误......这是我的 CSS（它有效；-)）？
@font-face {
font-family: 'bingo';
src: url("bingo.eot");
src: local('bingo'),
url("bingo.svg#bingo") format('svg'),
url("bingo.otf") format('opentype');
}
回答by Dycey
In case anyone was wondering - it was probably my css...
如果有人想知道 - 这可能是我的 css ......
@font-face
font-family: "bingo"
src: url('bingo.eot')
src: local('bingo')
src: url('bingo.svg#bingo') format('svg')
src: url('bingo.otf') format('opentype')
will render as
将呈现为
@font-face {
font-family: "bingo";
src: url('bingo.eot');
src: local('bingo');
src: url('bingo.svg#bingo') format('svg');
src: url('bingo.otf') format('opentype'); }
which seems to be close enough... just need to check the SVG rendering
这似乎足够接近......只需要检查SVG渲染
回答by Jezen Thomas
I've been struggling with this for a while now. Dycey's solution is correct in that specifying the srcmultiple times outputs the same thing in your css file. However, this seems to break in OSX Firefox 23 (probably other versions too, but I don't have time to test).
我已经为此苦苦挣扎了一段时间。Dycey 的解决方案是正确的，因为src在 css 文件中指定多次输出相同的内容。但是，这似乎在 OSX Firefox 23 中出现了问题（可能其他版本也是如此，但我没有时间进行测试）。
The cross-browser @font-facesolution from Font Squirrellooks like this:
Font Squirrel的跨浏览器@font-face解决方案如下所示：
@font-face {
font-family: 'fontname';
src: url('fontname.eot');
src: url('fontname.eot?#iefix') format('embedded-opentype'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
To produce the srcproperty with the comma-separated values, you need to write all of the values on one line, since line-breaks are not supported in Sass. To produce the above declaration, you would write the following Sass:
要src使用逗号分隔值生成属性，您需要将所有值写在一行上，因为 Sass 不支持换行符。要生成上述声明，您将编写以下 Sass：
@font-face
font-family: 'fontname'
src: url('fontname.eot')
src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg')
font-weight: normal
font-style: normal
I think it seems silly to write out the path a bunch of times, and I don't like overly long lines in my code, so I worked around it by writing this mixin:
我认为多次写出路径似乎很愚蠢，而且我不喜欢代码中的过长行，所以我通过编写以下 mixin 来解决它：
=font-face($family, $path, $svg, $weight: normal, $style: normal)
@font-face
font-family: $family
src: url('#{$path}.eot')
src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg')
font-weight: $weight
font-style: $style
Usage: For example, I can use the previous mixin to setup up the Frutiger Light font like this:
用法：例如，我可以使用之前的 mixin 来设置 Frutiger Light 字体，如下所示：
+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')
回答by CPHPython
For those looking for an SCSS mixin instead, including woff2:
对于那些正在寻找 SCSS mixin 的人，包括woff2：
@mixin fface($path, $family, $type: '', $weight: 400, $svg: '', $style: normal) {
@font-face {
font-family: $family;
@if $svg == '' {
// with OTF without SVG and EOT
src: url('#{$path}#{$type}.otf') format('opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype');
} @else {
// traditional src inclusions
src: url('#{$path}#{$type}.eot');
src: url('#{$path}#{$type}.eot?#iefix') format('embedded-opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype'), url('#{$path}#{$type}.svg##{$svg}') format('svg');
}
font-weight: $weight;
font-style: $style;
}
}
// ========================================================importing
$dir: '/assets/fonts/';
$famatic: 'AmaticSC';
@include fface('#{$dir}amatic-sc-v11-latin-regular', $famatic, '', 400, $famatic);
$finter: 'Inter';
// adding specific types of font-weights
@include fface('#{$dir}#{$finter}', $finter, '-Thin-BETA', 100);
@include fface('#{$dir}#{$finter}', $finter, '-Regular', 400);
@include fface('#{$dir}#{$finter}', $finter, '-Medium', 500);
@include fface('#{$dir}#{$finter}', $finter, '-Bold', 700);
// ========================================================usage
.title {
font-family: Inter;
font-weight: 700; // Inter-Bold font is loaded
}
.special-title {
font-family: AmaticSC;
font-weight: 700; // default font is loaded
}
The $typeparameter is useful for stacking related families with different weights.
该$type参数可用于堆叠具有不同权重的相关族。
The @ifis due to the need of supporting the Inter font(similar to Roboto), which has OTF but doesn't have SVG and EOT types at this time.
这@if是因为需要支持Inter 字体（类似于 Roboto），它有 OTF 但目前没有 SVG 和 EOT 类型。
If you get a can't resolveerror, remember to double check your fonts directory ($dir).
如果您收到无法解决的错误，请记住仔细检查您的字体目录 ( $dir)。
