@mixin font-face($name, $path, $weight: null, $style: null, $exts: otf ttf) {
$src: null;
$formats: (
otf: 'opentype',
ttf: 'truetype',
);
@each $ext in $exts {
$format: map-get($formats, $ext);
$src: append($src, url(quote($path)) format(quote($format)), comma);
}
@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
src: $src;
}
}
@include font-face("Kano", "../fonts/Kano.otf", 400, null, otf);
h1 {font-family: "Kano", sans-serif;}
'TIL LIST > HTML, CSS' 카테고리의 다른 글
[HTML, CSS] 반응형 이미지(picture, object-fit) (0) | 2022.07.23 |
---|---|
[CSS] calc() 사칙연산으로 속성값 정하는 방법 (0) | 2022.07.22 |
[HTML, CSS] 글자 백그라운드에 svg 파일을 삽입하는 법 (0) | 2022.07.20 |
[CSS] 미디어 쿼리 (0) | 2022.06.29 |
[SCSS] 설치 (0) | 2022.06.28 |