Font 관련 에러 (Failed to decode downloaded font)가 계속 발생하고 화면이 깜빡이는 거 같길래
이참에 Font에 관해 공부해보자고 생각이 들었다.
추후에 발생한 에러에 대해도 해결하고 추가 글을 작성할 것이다.
웹 폰트란 무엇인가?
사용자의 폰트 여부와 관계없이 서버에 있는 폰트를 사용하여 렌더링 해주는 방법이다.
예를 들어서 웹 폰트를 사용하면 사용자가 폰트 여부와 관계없이 사용 가능하지만 웹 폰트를 사용하지 않으면 기본 폰트가 사용 될 것이다.
특히 모바일에서 큰 장점이 되는데 기기마다 탑재된 폰트가 달라서 적용하기 어려웠던 문제가 해결된다.
사용법
Font-family
body { font-family: sans-serif, NanumGothic; }font-family는 왼쪽부터 순서대로 sans-serif를 사용하는 것이고 없다면 NanumGothic을 사용하라는 것이다.
만약 이름이 하나 이상의 단어로 구성되어 있으면 작은따옴표로 묶어주어야 한다.
@font-face
@font-face {
font-family: NanumSquareWeb;
src: local(NanumSquareR),
local(NanumSquare),
url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
url(NanumSquareR.woff) format('woff'),
url(NanumSquareR.ttf) format('truetype');
font-style: normal;
font-weight: normal;
}
h1 {
font-family: NanumSquareWeb, sans-serif;
}- font-family : 폰트의 이름을 설정한다. 원하는 대로 작성 가능하다.
- src : 폰트의 경로와 포맷을 설정한다.
- font-style : 글꼴체를 설정한다.
- font-weight : 폰트의 굵기 (숫자가 커질수록 굵어진다)
font-family
font-family 속성을 사용해서 NanumSquareWeb 폰트를 사용한다고 선언한다.
여기서 사용할 폰트명과 font-family이름이 동일하지 않아도 되나 유지보수를 위해 동일하게 하자
src
@font-face {
font-family: 'NanumGothic;
src: local('NanumGothic'); /* System font */
src: local('NanumGothic.eot'); /* IE 8 버전 이하 */
src: local('※'), /* else ... */
url('../fonts/NanumGothic.woff2') format('woff2'),
url('../fonts/NanumGothic.woff') format('woff'),
url('../fonts/NanumGothic.ttf') format('truetype');
font-style: normal;
font-weight: 100;
}두 가지 local(), url() 속성이 있다.
브라우저는 순차적으로 브라우저에 사용할 수 있는 폰트를 검색하게 된다.
각 브라우저마다 지원하는 글꼴 형식이 달라 불필요한 다운로드를 막기 위해 format속성을 사용한다.
브라우저에서 지원 가능한 파일만 다운로드할 수 있다.
IE6~8 버전은 굳이 다운하지 않아도 되는 woff를 다운로드하기 때문에 eot 글꼴을 woff 보다 위에 작성한다.
font-style
h1 {
font-style: normal;
}
h2 {
font-style: italic; /*이탤릭체*/
}
h3 {
font-style: oblique; /*이탤릭체와 크게 다른 점은 없다.*/
}
font-weight
@font-face {
font-family: NanumGothic;
src: url(NanumGothicL.woff) format('woff');
font-weight: 300;
}
@font-face {
font-family: NanumSquareWeb;
src: url(NanumGothicR.woff) format('woff');
font-weight: 400;
}
@font-face {
font-family: NanumSquareWeb;
src: url(NanumGothicB.woff) format('woff');
font-weight: 700;
}
@font-face {
font-family: NanumSquareWeb;
src: url(NanumGothicEB.woff) format('woff');
font-weight: 800;
}같은 폰트에서 font-weight를 사용해서 굵기를 다르게 사용할 수 있다.
만약 여기서 설정해주지 않은 값들을 사용하면 어떻게 될까?
font-weight:200을 하게 되면 font-weight:300이 적용되며 font-weight이 가장 가까운 값이 적용된다.