잡다한 내 인생의 기록
[폰트적용] 자동 폰트로딩 소스를 사용해 나눔고딕 폰트 적용하기 본문
SASS를 사용해 나눔고딕 폰트를 적용하는 방법에 대해 알아보겠습니다.
SASS는 함수를 사용할 수 있다는 장점이 있다고 말씀드렸었죠, 다음과 같은 소스를 몇가지 인자를 통해 자동으로 불러올 수 있도록 만든 함수가 있어 그 함수를 통해 css font-face를 적용하는 방법에 대해 설명드리겠습니다.
google early 폰트 엑세스 소스 그대로 만들어주는 소스입니다. 해당 소스를 잠시 보시면
maxins.scss
// =============================================================================
// String Replace
// =============================================================================
@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 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;
}
}
위와 같은 형식인데요, 소스상에서 보시는 것과 같이 @mixin 을 사용해 font-face라는 함수를 정의했고, 각각의 함수는 url을 받아 str-replace를 거쳐 exts 스트링값을 생성해 각 파일에 해당하는 src를 생성해 줍니다.
예를들어 "https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular" 라는 파라미터를 받아 아래와 같은 다섯가지 폰트 포맷을 전부 만들어 주는 것이죠.
https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?
https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2
https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff
https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf
https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.svg#NanumGothic
해당 폰트 포맷에 대한 부분들을 전부 자동으로 만들어 주니 scss 소스가 더욱 간결해 집니다.
이제 소스를 살펴보기에 앞서 폴더를 확인해 보겠습니다.
위에서 보신 함수를 정의한 "maxins.scss" 파일과 "style.scss" 파일로 구성이 되어 있습니다.
이제 maxins.scss를 불러와 함수를 사용하는 style.scss 파일의 폰트 임포트 부분을 확인해보겠습니다.
// font init
@import "maxins";
@include font-face(NanumGothic, "https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular", 400, normal);
@include font-face(NanumGothic, "https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold", 700, bold);
@include font-face(NanumGothic, "https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold", 800, bolder);
font-face를 정의하는 부분은 위와 같이 간단합니다.
우선 maxins.scss 파일을 사용하기 위해 임포트 하는 부분이 있습니다.
@import "maxins";
scss파일에서 같은 폴더에 있는 scss파일은 확장자 없이도 임포트가 가능합니다.
함수를 선언한 파일을 불러왔다면 font-face 함수를 사용해야겠죠?
@include font-face([폰트명], [url], [폰트 두께], [폰트 스타일]);
함수의 파라미터를 알아봅시다.
[폰트명] - 사용되어질 폰트의 이름입니다.
[url] - 폰트를 불러올 url입니다. 위에서 말씀드렸다시피 eot?, woff2, woff 등의 확장자와 포멧이 자동으로 생성되니 확장자 전의 url만 입력하시면 됩니다.
[폰트 두께] - 폰트의 두께를 지정합니다. 이 부분은 google early 폰트 css를 참조해 400, 700, 800 세 가지를 정의했습니다. 영문의 경우 따로 bold, extraBold 등의 두께가 없을 수 있으니 상황에 맞게 함수를 호출하시면 됩니다.
[폰트 스타일] - 폰트 스타일의 경우 나중에 나오는 scss 소스에서 bold 등으로 사용하실 때 사용되는 스타일인데, bold는 bold로 extraBold는 bolder로 적용해두었습니다.
이상으로 font-face는 모두 정의되었습니다. 덧붙여 기본 폰트 변수를 선언해 사용하는 방법을 추가로 말씀드리고 포스팅을 마치도록 하겠습니다.
sass 포멧의 파일에서는 $로 변수를 선언할 수 있습니다. 그러므로 아래와 같이 기본 폰트와 색상을 정의해 보겠습니다.
$primary-font: NanumGothic, "돋움", dotum, sans-serif;
$primary-font-size: 12px;
$primary-color: #222222;
이제 body 태그에 해당 폰트를 적용하면 끝입니다.
body {
font-family: $primary-font;
font-size: $primary-font-size;
color: $primary-color;
}
이렇게 하면 다음과 같은 css 소스가 나오는데요, css를 보기 전에 sass 를 css로 변환시키는 방법에 대해 잠시 설명드리겠습니다.
windows key + R 을 눌러 cmd창을 열어주시고 아래와 유사한 방법으로 scss 파일을 변환합니다.
sass -E 옵션을 사용하는 이유는 가끔 윈도우에서 CP949를 기본으로 사용해 / 라던지 한글을 오류로 잡아내기 때문입니다. 따라서 전 항상 인코딩을 정의해 변환합니다.
빨간 사각형 부분에 아무것도 출력되지 않았는데요, 출력이 되지 않으면 정상적으로 변환된 것입니다. 이제 폴더에 생성된 css 파일을 확인해 보시면 font-face가 정의된 부분이나 body에 font css가 적용된 것을 보실 수 있습니다.
폰트 로딩 부분은 여기까지 입니다. 무조건 저를 따라하실 필요는 없습니다. 다만 저는 scss를 사용할 때 함수를 정의하는 부분과 소스를 별개로 두어 임포트 하는 방식을 선호하기 때문에 이렇게 설명드렸습니다.
즐거운 sass 코딩 되시길 바랍니다.
'프로그램/코딩 > SASS' 카테고리의 다른 글
| [SASS 환경설정] sass를 사용해 퍼블리싱 하자![2] - sublime text 3 플러그인 설치 (2) | 2015.10.23 |
|---|
