SASS 和 @font-face

Posted 2023-03-06

【中文标题】SASS 和 @font-face

【英文标题】：SASS and @font-face

【发布时间】：2010-12-06 17:37:26

【问题描述】：

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

【参考方案1】：

就我而言，我使用 SASS Mixin：

@mixin font-face($family, $file, $path, $svg, $weight: normal, $style: normal)
  @font-face
    font-family: $family
    src: url($path + $file + '.eot')
    src: url($path + $file + '.eot?#iefix') format('embedded-opentype'), url($path + $file + '.woff') format('woff'), url($path + $file + '.ttf') format('truetype'), url($path + $file + '.svg##$svg') format('svg')
    font-weight: $weight
    font-style: $style

用法：

@include font-face('altivo', 'altivo-regular', '', 'altivo-regular')
@include font-face('altivo', 'altivo-medium', '', 'altivo-medium', 500, normal)
@include font-face('altivo', 'altivo-bold', '', 'altivo-bold', 700, normal)
@include font-face('corsa', 'corsa-grotesk-regular', '', 'corsa-grotesk-regular')
@include font-face('corsa', 'corsa-grotesk-medium', '', 'corsa-grotesk-medium', 500, normal)
@include font-face('corsa', 'corsa-grotesk-bold', '', 'corsa-grotesk-bold', 700, normal)
@include font-face('corsa', 'corsa-grotesk-xbold', '', 'corsa-grotesk-xbold', 800, normal)

结果：

@font-face 
  font-family: "altivo";
  src: url("altivo-regular.eot");
  src: url("altivo-regular.eot?#iefix") format("embedded-opentype"), url("altivo-regular.woff") format("woff"), url("altivo-regular.ttf") format("truetype"), url("altivo-regular.svg#altivo-regular") format("svg");
  font-weight: normal;
  font-style: normal;

@font-face 
  font-family: "altivo";
  src: url("altivo-medium.eot");
  src: url("altivo-medium.eot?#iefix") format("embedded-opentype"), url("altivo-medium.woff") format("woff"), url("altivo-medium.ttf") format("truetype"), url("altivo-medium.svg#altivo-medium") format("svg");
  font-weight: 500;
  font-style: normal;

@font-face 
  font-family: "altivo";
  src: url("altivo-bold.eot");
  src: url("altivo-bold.eot?#iefix") format("embedded-opentype"), url("altivo-bold.woff") format("woff"), url("altivo-bold.ttf") format("truetype"), url("altivo-bold.svg#altivo-bold") format("svg");
  font-weight: 700;
  font-style: normal;

@font-face 
  font-family: "corsa";
  src: url("corsa-grotesk-regular.eot");
  src: url("corsa-grotesk-regular.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-regular.woff") format("woff"), url("corsa-grotesk-regular.ttf") format("truetype"), url("corsa-grotesk-regular.svg#corsa-grotesk-regular") format("svg");
  font-weight: normal;
  font-style: normal;

@font-face 
  font-family: "corsa";
  src: url("corsa-grotesk-medium.eot");
  src: url("corsa-grotesk-medium.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-medium.woff") format("woff"), url("corsa-grotesk-medium.ttf") format("truetype"), url("corsa-grotesk-medium.svg#corsa-grotesk-medium") format("svg");
  font-weight: 500;
  font-style: normal;

@font-face 
  font-family: "corsa";
  src: url("corsa-grotesk-bold.eot");
  src: url("corsa-grotesk-bold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-bold.woff") format("woff"), url("corsa-grotesk-bold.ttf") format("truetype"), url("corsa-grotesk-bold.svg#corsa-grotesk-bold") format("svg");
  font-weight: 700;
  font-style: normal;

@font-face 
  font-family: "corsa";
  src: url("corsa-grotesk-xbold.eot");
  src: url("corsa-grotesk-xbold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-xbold.woff") format("woff"), url("corsa-grotesk-xbold.ttf") format("truetype"), url("corsa-grotesk-xbold.svg#corsa-grotesk-xbold") format("svg");
  font-weight: 800;
  font-style: normal;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

对于那些寻找 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)。

【参考方案3】：

我已经为此苦苦挣扎了一段时间。 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')

【讨论】：

有趣！我的 Intranet 用户没有使用 FF，所以没有注意到这个问题。会调查的

我遇到了一个问题，即已接受的解决方案在 IE9 和 10 中不起作用，但您建议将所有 srcs 放在一行中解决了它。谢谢！

我得到这个错误 Invalid CSS after " src: ": 预期的 "", was "url('#$path.e..."

@Jezen Thomas 您的示例包括路径，但不包括字体系列 url('#$path.eot') 结果：src: url('#../fonts/frutilig-webfont.eot') 请修复

【参考方案4】：

如果有人想知道 - 这可能是我的 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 渲染