CSS로 글꼴 임베드

Question

아래 CSS를 사용하여 글꼴을 가져 오려고합니다. Firefox 및 IE에서 작동하지만 Chrome에서는 지원하지 않습니다. Chrome에서 작동하도록 도와 주시겠습니까?

@font-face { 
    font-family: "Fontin-Bold"; 
    src: url(fonts/Fontin-Bold.ttf); 
    src: url(fonts/Fontin-Bold.eot); 
} 

Answer 1

다양한 브라우저가 필요하며 글꼴도 예외가 아닙니다. 다음은 전체 예제 :

CSS

@font-face { 
    font-family: 'UbuntuBold'; 
    src: url('ubuntu-bold-webfont.eot'); 
    src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('ubuntu-bold-webfont.woff') format('woff'), 
     url('ubuntu-bold-webfont.ttf') format('truetype'), 
     url('ubuntu-bold-webfont.svg#UbuntuBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

당신은 같은 폰트 페이스 생성기를 사용하여 더 나은 : Font Squirrel

는 또한 당신이 당신의 글꼴에 htaccess로를 설정해야 다음 유형의 폴더 :

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 

---

편집 :

더 나은 다른 글꼴 형식VS다른 브라우저을 설명 :

• 파이어 폭스와 사파리 지원 TTF 나 OTF 포맷;
• Internet Explorer는 EOT 형식을 지원합니다.
• Firefox 3.6은 새로운 WOFF (웹 글꼴 파일에 대한 새로운 형식 제안서)를 지원합니다.
• Google 크롬 및 iPhone의 Safari에서 SVG 파일을 허용합니다. @ font-face;