_font-face

@font-face の指定を簡単にします。

引数	型	初期値	説明
`@include _font-face($name, $path, $weight, $style, $types, $display, $unicodes);`
`$name`	String		フォント名
`$path`	String		拡張子を除いたフォントまでのパス
`$weight`	Number	`null`	フォントの太さ
`$style`	Number	`null`	フォントのスタイル
`$types`	List	`eot woff woff2`	フォントの拡張子
`$display`	String	`null`	`font-display` プロパティの値
`$unicodes`	List	`null`	`unicode-range` プロパティの値

NotoSansJPの指定

$types 引数の順序は出力の順番となります。

@include _font-face(NotoSansJP, '../NotoSansCJKjp-Regular', 400, normal);

@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 400;
  src: url("../NotoSansCJKjp-Regular.eot");
  src: url("../NotoSansCJKjp-Regular.eot?") format("embedded-opentype"),
       url("../NotoSansCJKjp-Regular.woff") format("woff"),
       url("../NotoSansCJKjp-Regular.woff2") format("woff2");
}

font-displayにも対応

font-display プロパティの値だけ変更したい場合は、$display 引数に swap と指定します。

@include _font-face(NotoSansJP, '../NotoSansCJKjp-Regular', 400, normal, $display: swap);

@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 400;
  src: url("../NotoSansCJKjp-Regular.eot");
  src: url("../NotoSansCJKjp-Regular.eot?") format("embedded-opentype"),
       url("../NotoSansCJKjp-Regular.woff") format("woff"),
       url("../NotoSansCJKjp-Regular.woff2") format("woff2");
  font-display: swap;
}