웹폰트 속성에 대해 알아보자
웹폰트 속성에 대해 알아보자
웹폰트(Web Fonts)는 웹사이트에서 특정 폰트를 사용하기 위해 사용되는 기술입니다. 기본 시스템 폰트 이외의 다양한 폰트를 웹사이트에 적용할 수 있도록 해줍니다. 웹폰트를 사용하려면 몇 가지 속성을 알아야 합니다.
웹폰트 사용시 CSS상에서 font-family 속성값 설정 팁.
font-family: "폰트네임", 속성값;
속성값 예제
- serif : 삐침 있는 명조계열의 글꼴
- sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
- monospace : 글자 폭과 간격이 일정한 글꼴
- cursive : 손으로 쓴 것 같은 필기계열의 글꼴
- fantasy : 화려한 글꼴
font-family: 부모 요소의 속성값을 가져 올때 ex) font-family: initial; /*기본값*/ font-family: inherit; /*부모요소의 속성값을 상속받음.*/
@font-face규칙:@font-face규칙은 웹폰트를 정의하는 데 사용됩니다. 이 규칙은 웹폰트 파일의 경로와 이름, 파일 형식을 지정합니다. 예를 들어:
@font-face {
font-family: 'Noto Sans';
src: url('noto-sans.woff2') format('woff2'),
url('noto-sans.woff') format('woff');
}
위의 예시에서는 ‘Noto Sans’라는 폰트 이름으로 웹폰트를 정의하고, src 속성을 사용하여 웹폰트 파일의 경로를 지정합니다. 여기서는 .woff2와 .woff 형식의 웹폰트 파일을 사용하고 있습니다.
font-family속성:font-family속성은 웹폰트를 사용할 때 폰트의 이름을 지정합니다.@font-face규칙에서 정의한 폰트 이름을 사용하면 됩니다. 예를 들어:
body {
font-family: 'Noto Sans', sans-serif;
}
위의 예시에서는 ‘Noto Sans’ 웹폰트를 body 요소의 폰트로 지정하고 있습니다. 웹폰트를 사용할 수 없는 경우에는 대체 폰트로 sans-serif를 사용합니다.
font-weight및font-style속성:font-weight와font-style속성을 사용하여 웹폰트의 굵기와 스타일을 지정할 수 있습니다. 예를 들어:
h1 {
font-family: 'Noto Sans', sans-serif;
font-weight: bold;
font-style: italic;
}
위의 예시에서는 ‘Noto Sans’ 웹폰트를 굵은 글꼴(bold)과 이탤릭체(italic)로 표시되는 h1 요소의 폰트로 지정하고 있습니다.
위의 속성들은 웹폰트를 적용하는 데 가장 일반적으로 사용되는 속성들입니다. 웹폰트를 사용할 때는 폰트 파일의 경로와 형식을 올바르게 지정하고, @font-face 규칙을 사용하여 웹폰트를 정의한 후, 해당 폰트를 원하는 요소에 적용하는 방식으로 웹폰트를 사용할 수 있습니다.
