CSS웹 글꼴

CSS3 웹 폰트 - @font-face 규칙

웹 폰트는 웹 디자이너가 사용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다.

당신이 발견되면 / 당신의 웹 서버에있는 글꼴 파일을 포함, 당신이 사용하고자하는 폰트를 구입하고, 필요시 자동으로 사용자에게 다운로드됩니다.

당신의 "자신의"글꼴은 CSS3의 내에서 정의 된 @font-face 규칙.

브라우저 지원

테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.

다른 글꼴 형식

TrueType 폰트 (TTF)

TrueType 애플과 마이크로 소프트에 의해 1980 년대 후반에 개발 된 글꼴 표준입니다. TrueType 맥 OS 및 Microsoft Windows 운영 체제 모두에 대한 가장 일반적인 글꼴 형식입니다.

OpenType 글꼴 (OTF)

OpenType 확장 가능한 컴퓨터 글꼴에 대한 형식입니다. 그것은에 지어진 TrueType , 마이크로 소프트의 등록 상표입니다. OpenType 글꼴이 주요 컴퓨터 플랫폼에서 현재 일반적으로 사용된다.

웹 오픈 폰트 포맷 (WOFF)

WOFF 웹 페이지에 사용되는 글꼴 형식입니다. 그것은 2009 년에 개발, 지금은 W3C 추천했다. WOFF는 본질적으로 OpenType 또는 TrueType 압축 및 추가 메타 데이터. 목표는 대역폭 제한과 네트워크를 통해 서버로부터 클라이언트 폰트 배포를 지원하는 것이다.

웹 오픈 폰트 포맷 (WOFF 2.0)

TrueType/OpenType 보다 더 압축을 제공 폰트 WOFF 1.0.

SVG 글꼴 / 모양

SVG 폰트는 텍스트를 표시 할 때 SVG 글리프로 사용 할 수있다. SVG 1.1 사양은 SVG 문서 내에서 글꼴을 만들 수있는 글꼴 모듈을 정의합니다. 또한 SVG 문서에 CSS를 적용 할 수 있고, @font-face 규칙은 SVG 문서의 텍스트에 적용될 수있다.

임베디드 OpenType 폰트 (EOT)

EOT 글꼴의 컴팩트 한 형태입니다 OpenType 웹 페이지에 포함 된 글꼴로 사용하기 위해 Microsoft에서 설계 글꼴.

글꼴 형식에 대한 브라우저 지원

표의 수치는 완전히 폰트 포맷을 지원하는 제 브라우저 버전을 지정한다.

* IE : "설치"로 설정하면 글꼴 형식에만 작동합니다.

* 파이어 폭스 : 기본적으로 지원되지 않습니다,하지만 ( "true"로 WOFF2를 사용하는 플래그를 설정해야합니다)를 활성화 할 수 있습니다.

원하는 글꼴을 사용 하

CSS3의에서 @font-face 규칙을 먼저 글꼴 (예 : 이름 정의해야합니다 myFirstFont ) 다음 글꼴 파일을 가리 킵니다.

	팁 : 항상 폰트 URL에 대한 소문자를 사용합니다. 대문자는 IE에서 예기치 않은 결과를 제공 할 수 있습니다.

HTML 요소의 글꼴을 사용하려면 글꼴 (의 이름을 참조 myFirstFont 관통) font-family 특성 :

굵은 텍스트를 사용하여

당신은 다른 추가해야합니다 @font-face 굵은 텍스트에 대한 설명을 포함하는 규칙을 :

파일 "sansation_bold.woff" Sansation 글꼴의 굵은 문자가 포함 된 다른 글꼴 파일입니다.

글꼴 가족 "텍스트의 조각마다 브라우저는이를 사용 myFirstFont "굵은 렌더링해야합니다.

이 방법은 많은 수 @font-face 같은 글꼴에 대한 규칙을.

연습으로 자신을 테스트!

연습 1» 운동 2»

CSS3 글꼴 설명자

다음 표 내에 정의 할 수있는 모든 폰트 디스크립터 나열 @font-face 규칙 :