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

Question

我正在构建一个 angular4 项目，我正在尝试从 .eot 文件导入字体。虽然它没有导入并且我无法使用字体，但控制台中也没有错误。如何正确地将 eot 字体导入到 Angular 项目中，以便可以使用该字体设置文本样式？这是 sass 文件中的 sn-p。

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

一旦你添加了功能，然后你可以添加不止一种这样的字体