题
我有以下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');
}
解决方案
在任何情况下不知道 - 这可能是我的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')
将呈现为
@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'); }
这似乎是足够接近...只需要检查的SVG渲染
其他提示
我一直在挣扎了一会儿。 Dycey的解决方案是正确的在指定src
多次输出在你的CSS文件同样的事情。然而,这似乎在OSX的Firefox打破23(可能是其他版本太多,但我没有时间来检验)。
这字体松鼠的跨浏览器@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;
}
要产生与逗号分隔值src
属性,你需要写所有的值在同一行,因为换行符不是在萨斯支持。为了生产上面的声明,可编写以下萨斯:
@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
我觉得这好像傻写出来的路径一堆次,我不喜欢在我的代码过长的线路,所以我的工作围绕它通过写这混入:
=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
<强>用法强>:例如,我可以使用前面的混入设置像这样的轻型FRUTIGER字体:
+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')
有关那些寻找一个SCSS混入代替,包括 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
}
在$type
参数是用于与不同的权重堆叠相关的家庭有用的。
在@if
是由于需要的支撑间字体(类似的Roboto ),其具有OTF但不具有在此时SVG和EOT类型。
如果你得到的无法解析的错误,记得要仔细检查你的字体目录($dir
)。
不隶属于 StackOverflow