[HTML/CSS] HTML CSS 웹폰트 넣는 법과 Anti-aliasing

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 폰트 패밀리 설정법

body {
  font-family : 'gulim', 'gothic'
}

• 폰트 명을 콤마로 여러 개 쓰면 제일 왼쪽에 있는 폰트부터 적용, 실패하면 뒤에 있는 폰트들을 차례로 적용
• 웹사이트 이용자 컴퓨터에 설치 된 폰트 적용 가능

💫 설치되지 않은 폰트를 사이트에서 이용하려면

/*로컬 폰트*/
@font-face {
  font-family : '이쁜폰트';
  src : url(폰트 경로)
}
/*웹 폰트*/
@font-face {
    font-family: 'Oneprettynight';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
}

woff 파일 사용 추천(ttf에 비해 용량이 3분의1 수준)

💫 폰트 Anti-aliasing

Anti-aliasing : 픽셀의 각진 부분을 부드럽게 변환

transform : rotate(0.04deg);

transform : 요소를 회전시키는 스타일
글자를 정말 매우 살짝 회전시키면 윈도우에선 Anti-aliasing 된 듯한 느낌을 줌