font-family는 inherit 됨
폰트패밀리 설정법
body {
font-family : 'gulim', 'gothic'
}-버그없이 사용하려면 폰트의 영문명을 사용해야한다
-폰트명에 띄어쓰기가 있을 수 있으니 따옴표 안에 담는것이 좋다
-폰트명을 콤마로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용한다 실패하면 뒤에있는 폰트들을 차례로 적용!
-웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용할 수 있다
커스텀 폰트 넣는 방법
- 사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하려면
@font-face {
font-family : '이쁜폰트';
src : url(../font/nanumsquare.ttf)
}폴더 내에 폰트파일 넣기
원하는 곳에 font-family:'이쁜폰트' 라고 적으면 그곳에 nanumsquare.ttf 폰트가 적용!
but 한글폰트 사이즈는 너무 크기 때문에 1~2개만 사용하기...ㅠㅠ
- 웹 폰트용 woff 파일 (용량줄이고 ttf와 똑같이 사용 가능)
나눔스퀘어 woff 버전
font-weight 그냥 주면 안이쁘기 때문에 굵은 폰트를 따로 등록하면 댄다
- Google Fonts
fonts.google.com
원하는 폰트를 고른 후
HTML에 첨부하고싶다면 <link>로 시작되는 부분을 복붙
CSS에 첨부하고싶다면 @import 로 시작되는 부분을 CSS 맨 위에 복붙
폰트 Anti-aliasing에 대해
윈도우에서 굴림체 이런 글씨들을 확대해보면 글씨가 거칠다는 느낌을 받는다.
폰트를 부드럽게 처리하려면? 아주 살짝 회전시켜보기
transform : rotate(0.04deg); 
💻