如何使用 angular4 将 eot 字体导入到 sass 文件中

Question

我正在构建一个angular4项目，我正在尝试从.eot文件导入字体。虽然它没有导入，我不能使用字体，但控制台中也没有错误。如何将 eot 字体正确导入到角度项目中，以便它可以用于设置该字体的文本样式？这是 sass 文件中的片段。

@font-face
  font-family: 'ProximaNovaCnBold'
  src: url('/proxima_nova_bold-webfont.eot') format('eot')

现在 eot 文件与 sass 文件位于同一文件夹中，但我也尝试将其放入资产中，但没有任何运气。任何帮助使其工作都非常棒。谢谢！

Answer 1

这是转换和设置字体的SCSS函数

  @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
      $src: null;
      $extmods: (
              eot: "?",
              svg: "#" + str-replace($name, " ", "_")
      );
      $formats: (
              otf: "opentype",
              ttf: "truetype"
      );
      @each $ext in $exts {
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
      }
      @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
      }
    }

添加您的字体，例如

@include font-face(proximaNovaBold, 'assets/fonts/proxima_nova_bold-webfont', eot, null, null, null);

添加

功能后，您可以添加多个这样的字体