@font-face는 CSS3의 모듈입니다. @font-face 모듈이 등장하면 더 이상 웹 개발에 글꼴을 사용할 필요가 없습니다. 웹 안전 글꼴만 사용하는 것에 대해 걱정하세요! 어떤 사람들은 IE가 그런 것을 지원할 수 있는지 확실히 묻습니다. @font-face 기능이 IE4부터 지원되었다는 사실을 알려드리자면 분명 놀라실 것입니다. 영어 웹사이트나 블로그를 보고 홈페이지의 로고, 태그, 페이지의 손글씨 영어 스타일과 같은 아름다운 사용자 정의 웹 글꼴을 본다면 한마디로 @font-face에 의해 구현된 것입니다.
먼저 @font-face의 문법 규칙을 살펴보겠습니다.
@ 글꼴-얼굴 {
[글꼴-가족: <가족 이름>]?
[src: [ <uri> [형식(<string>#)] | < 글꼴-얼굴-이름> ]#;]?
[유니코드 범위: <urange>#;]?
[글꼴 변형: <글꼴 변형> ]?
[font-feature-settings: 일반|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
값 설명:
font-family: 텍스트의 글꼴 이름을 설정합니다.
font-style: 텍스트 스타일을 설정합니다.
font-variant: 텍스트가 대문자인지 소문자인지 설정합니다.
font-weight: 텍스트의 두께를 설정합니다.
font-stretch: 텍스트를 가로로 늘릴지 여부를 설정합니다.
font-size: 텍스트 글꼴 크기를 설정합니다.
src: 사용자 정의 글꼴의 상대 경로 또는 절대 경로를 설정합니다. 이 속성은 @font-face 규칙에서만 사용할 수 있습니다.
호환되는 브라우저
@font-face와의 브라우저 호환성 문제에 대해 말하면 이는 글꼴 형식 문제와 관련이 있습니다. 브라우저마다 지원이 일관되지 않기 때문입니다. 글꼴 형식의 경우 다양한 버전의 브라우저에서 어떤 종류의 글꼴이 지원되는지 모든 사람이 이해하는 것이 필요합니다. 앞서 글꼴과 관련된 몇 가지 형식에 대해 간략하게 설명하겠습니다.
1. TrueTpe(.ttf) 형식:
.ttf 글꼴은 Windows 및 Mac에서 가장 많이 사용되는 글꼴이며 RAW 형식이므로 웹사이트에 최적화되어 있지 않습니다. 이 글꼴을 지원하는 브라우저에는 [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile Safari4.2+]가 포함됩니다.
2. OpenType(.otf) 형식:
. otf 글꼴은 TrueType을 기반으로 만들어진 원본 글꼴 형식으로 간주되므로 이 글꼴을 지원하는 브라우저는 [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10. 0+, iOS Mobile Safari4.2+];
3. 웹 오픈 글꼴 형식(.woff) 형식:
.woff 글꼴은 웹 글꼴 중에서 가장 좋은 형식입니다. 개방형 TrueType/OpenType의 압축 버전이며 메타데이터 패키지 분리도 지원합니다. 이 글꼴을 지원하는 브라우저에는 [IE9+, Firefox3.5+, Chrome6+, Safari3+, Opera11.1+]가 있습니다.
4. Embedded Open Type(.eot) 형식:
.eot 글꼴은 IE용 특수 글꼴입니다. 이 글꼴을 지원하는 브라우저는 [IE4+]입니다.
5. SVG(.svg) 형식:
.svg 글꼴은 SVG 글꼴 렌더링을 기반으로 하는 형식입니다. 이 글꼴을 지원하는 브라우저에는 [Chrome4+, Safari3.1+, Opera10. +, iOS 모바일 Safari3.2+].
참고: 이 섹션에서 브라우저 효과를 구현하려면 위의 글꼴 형식 파일을 다운로드해야 합니다! ! !
아아앙