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

case4

 

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

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

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

 

目次

1)環境と使用font
2)やりたいこと
3)mixinとfunctionを準備する
4)CSSで書く場合
5)Sassで書く場合
6)コンパイル結果

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");
}

参考

jonathantneal github

css-tricks

さいごに

ブラウザのことを考えずにフォントを自由自在に使えるようになったらうれしいな(╹◡╹)
話変わるけどちょっとあったかくなってきてサンダルで出歩けそうなのがうれしい。

参考になれば幸いです。

Blogs List

CONTACT

当事務所にご関心をお持ちいただきまして、ありがとうございます。
ご意見・ご相談等、お気軽に下記よりお問合わせください。

© Copyright 2019 NIAR All rights reserved.