[html] HTML5 웹 폰트
HTML5은 웹 디자이너에게 다양한 폰트를 웹 페이지에 쉽게 추가할 수 있는 기능을 제공합니다. 여기에는 @font-face를 사용하여 사용자의 컴퓨터에 로컬로 저장된 폰트 파일을 웹 페이지에 포함시킬 수 있는 기능이 포함됩니다.
@font-face 속성
@font-face는 웹 디자이너가 사용할 웹 폰트를 정의하는 데 사용됩니다. 이 속성을 사용하여 웹 페이지에 사용될 폰트 파일 경로를 지정할 수 있습니다. 아래는 @font-face를 사용한 예시입니다.
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff') format('woff'),
url('customfont.ttf') format('truetype');
}
위 예제에서, font-family는 폰트의 이름을 정의하고, src는 폰트 파일의 경로와 형식을 지정합니다.
웹 폰트 사용
@font-face를 사용하여 폰트를 선언하면, 해당 폰트를 웹 페이지의 다른 요소에 사용할 수 있습니다.
h1 {
font-family: 'CustomFont', sans-serif;
}
위 예제에서는 h1 요소에 @font-face를 통해 정의된 CustomFont 폰트를 사용하도록 지정했습니다.
주의 사항
웹 폰트를 사용할 때에는 몇 가지 주의사항이 있습니다.
- 크기와 속도: 적절한 크기의 폰트 파일을 선택하여 페이지의 로딩 시간을 최적화합니다.
- 라이선싱: 웹 폰트를 사용하기 전에 해당 폰트의 라이선스를 확인해야 합니다.
- 여러 포맷: WOFF, WOFF2, TTF, EOT 등 여러 형식의 폰트 파일을 제공하여 브라우저 호환성을 보장해야 합니다.
HTML5의 @font-face를 이용하면 다양한 폰트를 웹 페이지에 쉽게 적용시킬 수 있으며, 사용자 경험과 웹 페이지의 시각적 매력을 높일 수 있습니다.