이 블로그에서는 CSS @font-face 규칙의 사용법에 대해 설명합니다.
CSS @font-face 규칙이란 무엇입니까?
CSS의 @font-face 규칙은 우리 프로젝트의 사용자 지정 글꼴을 만드는 데 사용됩니다. 이러한 글꼴은 서버 또는 시스템에 설치된 글꼴에서 로드할 수 있습니다.
CSS @font-face 규칙을 사용하는 방법?
CSS @font-face 규칙을 사용하는 구문은 다음과 같습니다.
@폰트페이스 {
글꼴 모음 : MyNewFont ;
소스 : URL ( )
}
@font-face 규칙은 font-family 속성에 값을 지정하고 이 글꼴이 있는 관련 URL을 src 속성으로 지정하여 정의합니다.
예시
아래 예에서는 글꼴을 사용자 지정합니다. 이렇게 하려면 먼저 브라우저에서 글꼴을 다운로드하고 프로젝트의 폴더에 추가합니다. 서버에서 글꼴을 사용하는 경우 링크를 사용할 수도 있습니다.
먼저
및 태그를 추가한 다음 각각에 글꼴을 사용자 정의하도록 적용합니다. 위에서 설명한 시나리오를 3단계로 구현해 보겠습니다.
1단계: HTML 파일에 요소 추가
1단계: HTML 파일에 요소 추가
HTML에서
섹션 내부에 웹 페이지와 관련된 일부 콘텐츠를 추가하기 위해 및 를 추가합니다.
< h2 > Linuxhint에 오신 것을 환영합니다! < / h2 >
< h1 > Linuxhint에 오신 것을 환영합니다! < / h1 >
2단계: CSS에서 @font-face 규칙 지정
< h2 > Linuxhint에 오신 것을 환영합니다! < / h2 >
< h1 > Linuxhint에 오신 것을 환영합니다! < / h1 >
2단계: CSS에서 @font-face 규칙 지정
규칙을 지정하려면 키워드 ' @폰트페이스 ”는 CSS에서 활용됩니다. 중괄호 안에 font-family 속성을 추가하고 해당 값으로 글꼴 이름을 추가합니다. 그런 다음 src 속성을 사용하여 다운로드한 글꼴의 URL 경로를 지정합니다.
@폰트페이스 {
글꼴 모음 : 마이폰트 ;
소스 : URL ( '/글꼴/Batuphat\ Script.otf' ) ;
}
마찬가지로 다른 사용자 지정 글꼴 블록을 추가합니다.
@폰트페이스 {글꼴 모음 : myfont2 ;
소스 : URL ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
이제
및 요소에 스타일을 적용합니다.
스타일 h2 요소
h2 {
글꼴 모음 : 마이폰트 ;
글꼴 크기 : 50픽셀 ;
}
스타일 h2 요소
h2 {글꼴 모음 : 마이폰트 ;
글꼴 크기 : 50픽셀 ;
}
요소에 적용되는 속성은 다음과 같습니다.
- “ 글꼴 모음 '는 '값으로 설정됩니다. 마이폰트 ” 이것은 우리가 @font-face 규칙에서 선언한 것입니다.
- “ 글꼴 크기 ” 속성은 글꼴 크기를 50px로 설정합니다.
스타일 h1 요소
h1 {
글꼴 모음 : myfont2 ;
글꼴 크기 : 70픽셀 ;
색상 : 갈색 ;
}
여기서 “ 색상 ” 속성은 글꼴의 색상을 지정하는 데 사용됩니다.
아래 제공된 이미지에서
및 태그가 새로 선언된 글꼴로 성공적으로 스타일 지정되었음을 볼 수 있습니다.
CSS @font-face 규칙을 사용하는 방법을 제공했습니다.
결론
글꼴 스타일은 응용 프로그램을 미적으로 매력적으로 만드는 데 중요한 역할을 합니다. 우리 시스템에는 글꼴 스타일이 제한되어 있지만 개발자는 웹 앱에 미화를 추가하기 위해 다른 글꼴이 필요합니다. 이를 위해 CSS는 @font-face 규칙을 사용하여 사용자 지정 글꼴을 추가할 수 있도록 합니다. 이 문서에서는 응용 프로그램에서 글꼴 스타일을 사용자 지정할 수 있는 @font-face 규칙을 설명했습니다.