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中不支持换行符.要生成上述声明,您可以编写以下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

我认为多次写出这条路似乎很愚蠢,而且我不喜欢我的代码中过长的行,所以我通过编写这个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

用法:例如,我可以使用之前的mixin来设置Frutiger Light字体,如下所示:

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

Answer 3

对于那些正在寻找 SCSS mixin 的人，包括woff2，SASS list.append对于有条件地添加源文件/格式很有用：

@mixin fface(
  $path,
  $family,
  $type: "",
  $weight: 400,
  $style: normal,
  $local1: null,
  $local2: null,
  $ttf: null,
  $otf: null,
  $eot: null,
  $svg: null
) {
  $src: null; // initialize an empty source path
  // only load local files when both sources are present
  @if $local1 and $local2 {
    $src: append($src, local("#{$local1}"), comma);
    $src: append($src, local("#{$local2}"), comma);
  }

  @if $otf {
    $src: append($src, url("#{$path}#{$type}.otf") format("opentype"), comma);
  }

  // load default formats (woff and woff2)
  $src: append($src, url("#{$path}#{$type}.woff2") format("woff2"), comma);
  $src: append($src, url("#{$path}#{$type}.woff") format("woff"), comma);
  // formats that should only be added at the end
  @if $ttf {
    $src: append($src, url("#{$path}#{$type}.ttf") format("truetype"), comma);
  }

  @if $svg {
    $src: append($src, url("#{$path}#{$type}.svg##{$svg}") format("svg"), comma);
  }
  // the actual FONT FACE DECLARATION
  @font-face {
    font-family: $family;
    // for compatibility reasons EOT comes first and is not appended
    @if $eot {
      src: url("#{$path}#{$type}.eot");
    }
    // load appended sources path
    src: $src;
    font-weight: $weight;
    font-style: $style;
  }
}
// USAGE
$dir: "assets/fonts/";

// declare family name
$familyName: "MyFont";

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-regular", 400, "normal",
  "#{$familyName} Regular", "#{$familyName}-Regular", "ttf", "otf"
);

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-medium", 500, "normal",
  "#{$familyName} Medium", "#{$familyName}-Medium", "ttf", "otf"
);

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-semibold", 600, "normal",
  "#{$familyName} SemiBold", "#{$familyName}-SemiBold", "ttf", "otf"
);

// Material Icons
$familyName: "Material Icons"; // override previous value
$familyFileName: "MaterialIcons";

@include fface(
  "#{$dir}#{$familyFileName}", $familyName, "-regular", 400, "normal",
  $familyName, "#{$familyFileName}-Regular", "ttf", null, "eot"
);
@include fface(
  "#{$dir}#{$familyFileName}", "#{$familyName} Outline", "-outline", 400, "normal",
  "#{$familyName} Outline", "#{$familyFileName}-Outline", null, "otf", "eot"
);

.material-icons {
  font-family: $familyName;
}

.material-icons-outline {
  font-family: "#{$familyName} Outline";
}

该$type参数用于在$family.

如果您收到无法解决的错误，请记住仔细检查您的字体目录 ( $dir)。