Sassでmixinとfunctionを使ってfont-faceを設定してみた

BLOG
知る。残す。伝える。

2019.04.21
Sass

Sassでmixinとfunctionを使ってfont-faceを設定してみた

最近、SassでかつWebフォントを使いたいっていう案件がありました。
ブラウザによって、fontのフォーマットが違うので、それぞれブラウザに対応して指定しなければならない。

コーディングはいかに要領よく綺麗に早くできるかが勝負なのに、正直言って手間。。
少しでも時間を割いて、
ドラムを叩く時間か猫を眺める時間にあてたい。

mixinとfunctionを準備して@font-faceを吐き出してみました。
備忘録です。

1）環境と使用font

OS：Mac OS Mojave 10.14
コンパイル方法：ターミナル sassコマンド（Sass導入方法などは割愛します）
エディタ：sublime text
Font：NotoSansJapanese
Font weight：400

変換後の下記のフォントデータがあることを想定

NotoSansCJKjp-Regular.eot（古いIE）
NotoSansCJKjp-Regular.woff（Mac）
NotoSansCJKjp-Regular.ttf（Windows）
（NotoSansCJKjp-Regular.svg）
※今回は一括吐き出しに焦点を当てたいのでsvgフォントと想定し吐き出す。
実際は任意のフォントやsvgがいらない場合は
$extsのkeyを変更。

2）やりたいこと

eot woff ttf svg形式で
Font-faceのsrc、formatを
Sassで一括で吐き出したい！

3）mixinとfunctionを準備する

// =============================================================================
// svgフォント用のfunction
//任意の文字列を探し出し置換
// =============================================================================

@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

// =============================================================================
// font-faceを吐き出すmixin
// =============================================================================

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
$src: null;

$extmods: (
//eot: “?”, 古いIE用のkeyを設定する用だが割愛。一応記載しておきます。
svg: "#" + str-replace($name, " ", "_")
);

$formats: (
otf: "opentype",
ttf: "truetype",
eot: "embedded-opentype"
);

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

準備完了。
任意のディレクトリに保存。

4）CSSで書く場合

これを手打ちで指定しなければならない

@font-face {
font-family: "NotoSansJapanese";
font-style: normal;
font-weight: 400;
src: url("../fonts/NotoSansCJKjp-Regular.eot") format("embedded-opentype"), 
url("../fonts/NotoSansCJKjp-Regular.woff") format("woff"),
 url("../fonts/NotoSansCJKjp-Regular.ttf") format("truetype"), 
url("../fonts/NotoSansCJKjp-Regular.svg#NotoSansJapanese") format("svg");
}

5）Sassで書く場合

@include font-face("NotoSansJapanese", "../fonts/NotoSansCJKjp-Regular" , 400, normal);

この一文で終わる。
ありがとうx1000000000

6）コンパイル結果

先ほどのこの一文を書いてコンパイル！！

@include font-face("NotoSansJapanese", "../fonts/NotoSansCJKjp-Regular" , 400, normal);

結果というか、これはCSSで吐き出されるだけなので
“CSSで書く場合”と同じ内容です。
CSSとSassを比べたかったので先に書いておりました。

結果

@font-face {
font-family: "NotoSansJapanese";
font-style: normal;
font-weight: 400;
src: url("../fonts/NotoSansCJKjp-Regular.eot") format("embedded-opentype"),
 url("../fonts/NotoSansCJKjp-Regular.woff") format("woff"), 
url("../fonts/NotoSansCJKjp-Regular.ttf") format("truetype"), 
url("../fonts/NotoSansCJKjp-Regular.svg#NotoSansJapanese") format("svg");
}