SASS和@ font-face

Question

我有以下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'); 
} 

Answer 1

为了防止有人想知道 - 这可能是我的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渲染

Answer 2

我一直在努力与此一段时间了。 Dycey的解决方案是正确的，因为指定src多次在你的css文件中输出相同的东西。但是，这似乎打破了OSX Firefox 23（可能还有其他版本，但我没有时间测试）。

从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; 
} 

要使用逗号分隔值产生src属性，你需要写所有的值在同一行，因为线 - 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 

我觉得这好像傻写出来的路径一堆次，我不喜欢在我的代码过长的线路，所以我围绕它的工作通过写这混入：

=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 

使用：例如，我可以使用以前的mixin设置了FRUTIGER Light字体这样的：

+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')