CSS3 - @ 글꼴 얼굴 (텍스트 글꼴 패키지)

@ 글꼴 얼굴

로컬 외부 글꼴 패키지를 다운로드, 글꼴 스타일은 처리

우리는 얼마나 사용보고

. (1)          폰트 얼굴 @ {
 2              폰트 패밀리 : '주문' ;
 3.              SRC에 : URL ( "주소") ;
 (4).          }
 5.         DIV {
 6.             폰트 패밀리 : "상기 정의 된 이름을 사용하여 '
 7         }

중국어 폰트 패키지가 큰, 그래서 로딩 속도가 훨씬 느린이기 때문에 우리의 중국어 웹 사이트에서 실제로 많이 사용했다.

글꼴 패키지가없는 경우를 제외하고, 상황이 더 이상 사용되지

설명 :

설정은 글꼴 HTML 문서에 포함.
  • 주류 브라우저의 현재 요구와 호환 TureTpe (.TTF), 웹 오픈 폰트 포맷 (.woff), 임베디드 오픈 타입 (.eot), SVG (.svg) 형식으로 네 개의 글꼴을 사용합니다.
  • HTML 문서에 포함 된지도 글꼴 오픈 타입 글꼴 (압축 트루 타입 글꼴) HTML 문서에 사용 된 글꼴, 또는 치환 기존 클라이언트 시스템의 같은 이름의 글꼴을 제공하기 위해 클라이언트 시스템에 파일을 의미합니다. 클라이언트를 표시하려면 해당 클라이언트가 설치된 글꼴이 없습니다.
  • .eot IE의 독점 폰트 포맷 (임베디드 오픈 타입). Safari3.1는 .TTF (트루 타입) 및 .OTF (오픈 타입)을 지원하기 시작했다.
  • 미래 .woff (웹 오픈 폰트 포맷) .TTF (트루 타입) 및 .OTF (오픈 타입) 두 폰트 포맷을 대체합니다.
  • 예 : 완전히 브라우저 호환 사용자 정의 글꼴을 사용

  

1 명          @ 폰트면 {
 2               폰트 패밀리 : 'diyfont' ; 
3               SRC : URL ( 'diyfont.eot') ; / * IE9 + * /  
4               SRC : URL ( 'diyfont.eot #iefix?) 포맷 ('임베디드 오픈 ') / * IE6-IE8 * /  
5               URL ('diyfont.woff ') 포맷 ('WOFF ') , / * 크롬, 파이어 폭스 * /  
6               URL ( 'diyfont.ttf') 형식 ( '트루') / * 크롬, 파이어 폭스, 오페라, 사파리, 안드로이드, 아이폰 OS 4.2 이상 * /  
7              URL ( 'diyfont.svg # 폰트 명') 형식 ( 'SVG') ; / * iOS의 4.1- * /  
8          }

 

추천

출처www.cnblogs.com/yangpeixian/p/11200372.html