파이어 폭스 내가 웹 페이지에 사용자 정의 글꼴 정의하려면 다음 CSS를 사용하고 사용자 정의 글꼴

Question

을 인식하지 :

#custom_font 
{ 
    font-family:zapfino; 
    font-size:18px; 
} 

나 ':

@font-face 
{ 
    font-family:zapfino; 
    src:url("zapfino.ttf"); 
} 

다음, 나는 그것을 사용하는 ID를 정의하고 Safari 및 Chrome에서 페이지를 테스트했는데 정상적으로 작동합니다. 그러나, 파이어 폭스 글꼴이 나타나지 않습니다, 그것은 기본값으로 되돌리고 있습니다. 미안 해요 재 게시가 있지만 StackOverflow에서 검색하고 대답을 찾을 수 없습니다! 왜 이런 일이 일어나는 지 아는 사람이 있습니까? www.moosecodes.com (아직 공사 중입니다! 엉망으로 사죄 해주십시오!)

Answer 1

jlego 오른쪽이다 - 그들은 당신의 키트를 구축하고 당신을 위해 파일을 변환하는 훌륭한 도구를 가지고, 당신은 항상 글꼴이 귀하의 사이트에 사용하는 것이 합법적인지 확인해야합니다 - 당신은 FontSquirrel을 확인해야합니다.

Firefox와 Chrome은 모두 사용중인 형식 인 TTF를 지원해야합니다.

귀하의 사이트에서 귀하의 문제를 조사한 결과 글꼴이 올바르게 렌더링되지 않습니다. 브라우저에서 체크인했습니다. 스타일 시트가 올바른 파일 위치를 참조하고 있지만, 글꼴 파일이 손상된 것 같습니다. 새로운 글꼴 파일을 새로 가져와 사용하는 것이 좋습니다.

Answer 2

각 브라우저는 웹 글꼴 용으로 하나의 파일 유형 만 읽습니다. 불행히도, 그들은 모두 다른 파일 형식입니다. 글꼴이 모든 브라우저에서 올바르게 표시되게하려면 4 가지 유형의 글꼴 파일 (TTF, WOFF, SVG & EOT)이 필요합니다. 그 코드가 FontSquirell 글꼴에 포함 된 스타일 시트의 기반

@font-face { 
font-family: 'Zapfino'; 
    src: url('Zapfino.eot'); 
    src: url('Zapfino.eot?#iefix') format('embedded-opentype'), 
     url('Zapfino.woff') format('woff'), 
     url('Zapfino.ttf') format('truetype'), 
     url('Zapfino.svg#SansumiRegular') format('svg'); 
} 

: 코드를 다음과 같이 보일 것입니다.

FontSquirell에는 변환기가 있지만 라이센스를 확인해야합니다. Zapfino는 Adobe (?)가 소유 한 상업용 글꼴이며 @ font-face로 글꼴을 사용하는 것이 EULA 글꼴을 위반하는 것임을 알고 있습니다.

TypeKit은 파운드리 EULA를 준수하는 요금으로 @ font-face와 함께 사용할 상용 글꼴을 제공합니다.

Answer 3

나는 똑같은 문제가 있었다 .... jlego의 대답은 나에게 유용했다. Chrome 및 IE에서 내 글꼴을 인식했습니다. 내 CSS 파일에 형식 ('truetype')을 추가 할 때까지 FF로 내 TTF가 인식되지 않았습니다.