CSS3 글꼴

CSS3의 @ 글꼴 얼굴 규칙

CSS3의 이전 버전, 웹 디자이너는 이미 글꼴이 설치되어 사용자의 컴퓨터에 사용했다.

CSS3를 사용하여, 웹 디자이너는 그 / 그녀가 좋아하는 어떤 글꼴을 사용할 수 있습니다.

글꼴 파일을 단순히 웹 사이트에 포함됩니다 때 당신이 글꼴을 사용하고자하는 파일을 찾아 자동으로 사용자의 요구에 다운로드됩니다.

CSS3의 @ 글꼴 얼굴 규칙 설명에 새 버전에서 원하는 글꼴.

당신의 "자신의"글꼴은 CSS3의 @ 글꼴 얼굴 규칙에 정의되어 있습니다.

브라우저 지원

표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.

인터넷 익스플로러 9 이상, 파이어 폭스, 크롬, 사파리, 오페라 지원 WOFF (웹 오픈 폰트 포맷) 글꼴.

파이어 폭스, 크롬, 사파리, 오페라 지원 .TTF (트루 타입 글꼴)과 .OTF (오픈 타입) 폰트 폰트 타입).

크롬, 사파리와 오페라는 SVG 글꼴을 지원 / 축소.

인터넷 익스플로러는 EOT (임베디드 오픈 타입) 글꼴을 지원합니다.

참고 : 인터넷 익스플로러 8 이전 버전의 새로운 @ 글꼴 얼굴 규칙을 지원하지 않습니다.

당신은 글꼴을 사용합니다

새 @ 글꼴 얼굴 규칙을 먼저 글꼴 이름 (예 : myFirstFont)을 정의해야합니다 다음 글꼴 파일을 가리 킵니다.

	팁 : URL 소문자 글꼴을 사용, IE에서 대문자는 예상치 못한 결과를 얻을 수

글꼴 - 가족의 특성에 의해 글꼴 이름 (myFirstFont)를 참조, HTML 요소의 글꼴을 사용합니다 :

예

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>

»시도

굵은 텍스트를 사용하여

당신은 굵은 텍스트를 포함하는 다른 @ 글꼴 얼굴 규칙을 추가해야합니다 :

예

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

»시도

파일 "Sansation_Bold.ttf은"Sansation 굵은 글꼴을 포함하는 다른 글꼴 파일입니다.

이 브라우저의 텍스트 글꼴 가족 시간 "myFirstFont"를 사용하는 것은 굵은 글씨로 렌더링해야합니다.

그래서 당신은 동일한 글꼴 @ 글꼴 얼굴 규칙의 대부분을 가질 수 있습니다.

CSS3 글꼴 설명

다음 표는 모든 글꼴 설명과 @ 글꼴 얼굴 규칙 정의의 내부를 보여줍니다