Question

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

var json = {var1: 'test'};

var params = 'json='+json;

let headers = new Headers();

headers.append('Content-Type', 'application/json');

http.post("http://example.com/infoarray.php", params, headers ).subscribe (re => {
console.log(re)
})

现在，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);

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

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

1 个答案: