当前位置： 文江博客话题详情

SASS 和@font-face

发布于 2024-08-07 16:46:39 字数 293 浏览 4 评论 0原文

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

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 ;-) )?

@font-face {
  font-family: 'bingo';
    src: url("bingo.eot");
    src: local('bingo'),
       url("bingo.svg#bingo") format('svg'),
       url("bingo.otf") format('opentype');
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

浅笑轻吟梦一曲 2024-08-14 16:46:39

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

In case anyone was wondering - it was probably my 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

回复 原文
不必了 2024-08-14 16:46:39

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

I’ve been struggling with this for a while now. Dycey’s solution is correct in that specifying the src multiple 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).

The cross-browser @font-face solution from Font Squirrel looks like this:

@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 src property 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:

@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:

=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:

+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')
回复 原文
捶死心动 2024-08-14 16:46:39

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

For those looking for an SCSS mixin instead, including woff2, SASS list.append is useful for conditionally adding source files/formats:

@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";
}

The $type parameter is used for locating different files within a $family.

If you get a can't resolve error, remember to double check your fonts directory ($dir).

回复 原文
分分钟 2024-08-14 16:46:39

在我的例子中，我使用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;
}

In my case I use 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

Usage:

@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)

Result:

@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;
}
回复 原文
~没有更多了~

关于作者

香橙ぽ

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文