CSS3의 @ 글꼴 얼굴 규칙
예
그 URL을 찾기 위해 "myFirstFont"라는 이름의 글꼴을 지정하고 위치를 지정합니다 :
@ 글꼴 얼굴
{
글꼴 - 가족 : myFirstFont;
SRC : 홈페이지 ( 'Sansation_Light.ttf'),
URL ( 'Sansation_Light.eot'); / * IE9 * /
}
{
글꼴 - 가족 : myFirstFont;
SRC : 홈페이지 ( 'Sansation_Light.ttf'),
URL ( 'Sansation_Light.eot'); / * IE9 * /
}
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬, 사파리 지원 @ 글꼴 얼굴 규칙.
그러나, 인터넷 익스플로러 9은 글꼴, 파이어 폭스, 크롬, 사파리, 오페라 지원 .TTF의 유형 .eot 및 글꼴의 두 가지 유형의 .OTF 지원합니다.
참고 : 인터넷 익스플로러 8과 IE의 이전 버전 @ 글꼴 얼굴 규칙을 지원하지 않습니다.
정의 및 지침을 속성
@ 글꼴 얼굴 규칙은 웹 디자이너는 더 이상 "웹 안전한"글꼴 하나를 사용할 필요가 없습니다.
글꼴, 글꼴의 이름 - 얼굴 규칙 :
- 글꼴 - 가족 : myFirstFont;
어딘가에 서버에 포함 된 글꼴 파일 참조 CSS :
- SRC : 홈페이지 ( 'Sansation_Light.ttf')
폰트 파일은 다른 위치에있는 경우, 전체 URL을 사용
- SRC : 홈페이지 ( '../../ www.w3cschool.css / CSS3 / Sansation_Light.ttf')
이제 글꼴을 사용할 수 있습니다, 다음은 모든 div 요소를 사용하는 방법의 예입니다 :
사업부
{
글꼴 - 가족 : myFirstFont;
}
{
글꼴 - 가족 : myFirstFont;
}
구문 :
- @ 글꼴 얼굴
{
글꼴 속성
}
사업부에 사용 된 글꼴의 예는 다음과 같습니다
사업부
{
글꼴 - 가족 : myFirstFont;
}
{
글꼴 - 가족 : myFirstFont;
}
문법
@ 글꼴 얼굴
{
글꼴 속성
}
{
글꼴 속성
}
| 글꼴 설명 | 값 | 설명 |
|---|---|---|
| 글꼴 - 가족 | 이름 | 필요합니다. 글꼴 이름을 정의합니다. |
| SRC | URL | 필요합니다. 글꼴 다운로드 URL을 정의 (S) |
| 글꼴 스트레칭 | 표준 응축 울트라 응축 - 별도의 응축 반 응축 확장 반 확장 - 추가 확장 울트라 확장 | 선택 사항. 글꼴이 신장되는 방법을 정의합니다. 기본값은 "정상"입니다 |
| 글꼴 스타일 | 표준 이탤릭체 비스듬한 | 선택 사항. 같이 있어야 글꼴 스타일을 정의합니다. 기본값은 "정상"입니다 |
| 글꼴 무게 | 표준 대담한 (100) (200) (300) (400) (500) (600) (700) (800) (900) | 선택 사항. 사용자 정의 글꼴 두께. 기본값은 "정상"입니다 |
| 유니 코드 범위 | 유니 코드 범위 | 선택 사항. 범위는 글꼴은 유니 코드 문자를 지원 정의된다. 기본값은 "U + 0-10 FFFF"입니다 |
관련 기사
CSS3 튜토리얼 : CSS3 글꼴