폰트 패밀리 설정법
- 이건 폰트가 컴퓨터에 설치되어 있어야 작성 가능
body {
font-family : 'gulim', 'gothic'
}버그없이 사용하려면 폰트의 영문명을 사용
폰트명에 띄어쓰기가 있을 수 있으니 따옴표 안에 담는게 좋음
폰트명을 콤마로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용한다.
실패하면 뒤에 있는 폰트들을 차례로 적용합니다.
웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용할 수 있다.
사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하려면
@font-face {
font-family : '예쁜폰트';
src : url(nanumsquare.ttf)
}CSS파일 최상단에 @font-face 라는 명령어를 넣고,
그 안에 적용할 폰트의 경로와 이름을 적어주기(폴더 내에 폰트 파일이 필요함)
내가 준비한 폰트 파일을 css에서 사용 가능하게 등록해주는 과정
그럼 이제 원하는 곳에서 font-family : '예쁜폰트' 라는 폰트를 사용할 수 있다.
(그럼 그곳엔 nanumsquare.ttf 폰트가 적용된다.)
폰트 용량 줄이기 .woff
한글 폰트는 사이즈가 너무 크다. 최대 2개 정도만 쓰기
*.woff 웹 폰트 형식을 사용하면 용량이 ttf의 약 3분의 1로 확 줄어들기 때문에 용량, 트래픽 줄어든다.
굵은 폰트 사용하려면
font-weight그냥 쓰면 이쁘지 않기 때문에, 굵은 폰트를 따로 등록해서 사용하는게 좋다.
Google Fonts
- 폰트를 빠르게 사용하기 위한 Google Fonts
구글폰트라는 사이트를 이용하면 굳이 폰트파일을 구하지 않아도 된다.
Google Fonts 사이트에서 바로 폰트파일과 CSS 정의부분을 링크할 수 있다.
fonts.google.com
HTML에 첨부하고 싶다면 로 시작되는 부분을 복붙하기
CSS에 첨부하고 싶다면 @import 로 시작되는 부분을 CSS 맨 위에 복붙하기
구글이 호스팅해주는 폰트가 미리 정의된 CSS 파일을 가져다 쓰는 것이라
내 사이트의 트래픽을 절약할 수 있다는게 장점이고,
크롬브라우저는 이미 방문한 사이트 캐싱해주기 때문에 많은 사람들이 이용할 수록 더 빠르게 폰트를 이용할 수 있다.
폰트 Anti-aliasing
앤티앨리어싱은 픽셀의 각진 부분을 스무스하게 바꿔주는건데
맥으로 웹개발하면 폰트 뭘 쓰든 이쁘게 보인다.
심지어 굴림, 돋움 같은 기본 폰트도 앤티앨리어싱이 되어서 부드럽게 나온다.
윈도우에서 돋움, 굴림 폰트를 매우 작게 축소하거나 아니면 매우 크게 확대했을 때 매우 각져보인다.
대부분의 폰트가 저런 현상이 일어난다. 거슬리는 문제인데
이 문제를 해결하고 싶다면 웹상의 글자를 살짝 돌려보기
p,h1,span 등 {
transform : rotate(0.04deg)
}css파일에다가 이렇게 작성해주기. 요소를 살짝 회전시키는 스타일
글자를 아주 살짝 회전시키면 윈도우에선 안티앨리어싱 된 듯한 부드러운 느낌을 준다.
