@ font-face가 크롬에서 작동하지 않습니다

Question

마침내 월간 취미 프로젝트에 대한 작업을 계속했습니다. 나는 연초에 몇 가지 컴퓨터 문제를 겪었고 새로운 Windows 설치를해야했으며 DB를 잃어 버렸지 만 스크립트를 검색 할 수있었습니다. 내가 아는 한, 절대 ​​URL을 제외하고는 모든 것이 이전과 완전히 동일합니다. 나는 localhost에서 순전히 노력하고있다. 내 기억이 실패하지 않는 한 모든 주요 브라우저에서 모든 것이 잘 작동하고 있다는 것을 확신합니다.

@font-face 
{ 
    font-family: "cabin" ; 
    src: url("http://localhost/hrhr/fonts/cabin.ttf"); 
} 

* 
{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    font-family: "cabin"; 
} 

일부 발언 : 작동려고, 나는 코드/파일 이름 간소화

• 으로는 크롬에 (33)를 작동하지 않습니다 말했다 않으며 (오페라에서 작동합니까 20).
• Internet Explorer (11)에서 작동합니다. 코드와 파일 이름을 단순화하지 않고 이미 작업했습니다.
• 나는 몇 달 전에 모든 것이 잘 작동하고 있으며, 절대 URL과 브라우저 버전과 별개로 변경된 사항이 없다고 확신합니다.
• 비슷한 질문에서 anwser가 제안한대로이 형식을 추가하려고 시도했지만 도움이되지 않았습니다.
• 따옴표를 변형 해 보았습니다.
• 일반적으로 Chrome 개발자 도구에는 리소스가 없습니다. 이상하게도 때로는 (코드 변형을 시도한 후에) 코드를 작성하면 그 이름이 올바르게 표시되지만 예제 글꼴은 틀립니다 (아마 Times New Roman 일 가능성이 있습니다).
• 다른 폴더의 글꼴 파일을 복사하고 상대 URL을 사용해 보았습니다.
• @ font-face 규칙을 제거하고 글꼴을 설치하고 로컬 참조 만 사용하면 잘 표시되며 Google webfont 참조를 사용하는 경우에도 작동합니다.

나는 뭔가를 간과하고 있다고 생각하지만, 인터넷 검색은 아직 도움이되지 않았다. 이상하게도 IE는 내 코드에 아무런 문제가 없다. 미리 감사드립니다.

편집 : 글꼴이 여기에서 찾을 수 있습니다 : 2 http://www.impallari.com/cabin

편집 : 감사 Dima's의 anwser에, I've이 문제를 해결 없지만, 미안 가까운 곳을 이해한다.

사이트에서 제공하는 글꼴과 스크립트를 사용하여 작업 한 다음 단계별로 단계별로 요소를 제거하여 다시 작동을 멈출 때까지 원래 상황과 닮았습니다. 기본적으로 스크립트와 "변환 된"ttf 파일로 작업 할 수 있으므로 원본 ttf 파일 자체에 문제가있는 것 같습니다. 스크립트, 파일 경로 또는 크로스 브라우저 호환성은 문제가되지 않습니다. 변환이 완료되면 Chrome에 문제가 없습니다. 그러나 기술적 인 차이점이 무엇인지 전혀 알지 못합니다.

내일 내가 차이를 찾을 수 있는지 확인하기 위해 글꼴 뷰어를 찾을 수 있는지 확인합니다. 나는 또한 폰트 제작자에게 메일을 보내어 (문제를 알고 있는지 물어 본다.) 다른 사람들이 글꼴을 "있는 그대로"문제가 있는지 알고 싶다. 누군가가 기술적 인 설명을하지 않는다면 나는 Dima의 anwser를 받아 들일 것이고 폰트를 "변환"하는 법을 배울 것입니다.

Answer 1

이처럼 사용해보십시오 :

@font-face { 
    font-family: 'Cabin'; 
    src: url("/fonts/cabin.eot"); 
    src: url("/fonts/cabin.eot?#iefix") format("embedded-opentype"), url("/portals/0/fonts/cabin.woff") format("woff"), url("/fonts/cabin.ttf") format("truetype"), url("/fonts/cabin.svg#cabin") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

이 모든 브라우저가 포함되어 있는지 확인합니다 ...가장 좋은 방법은 this one 또는과 같은 웹 글꼴 생성기에 .ttf 글꼴을 업로드하는 것입니다. 그러면 다른 형식으로 웹 글꼴이 생성되고 다운로드 할 수 있습니다 ... CSS도 포함됩니다. 위의 그림과 비슷합니다.

EDIT : 왜 그런지에 대한 질문에 답하기 위해 옳고 그른 대답은 없습니다. 다른 브라우저는 다른 글꼴 형식을 지원합니다. 당신은 here

Answer 2

당신은 심지어

@import url('fonts/cabin.ttf');을 사용할 수 있습니다 그 중 일부에 대해 읽을 수 있습니다 그리고, 그것을 사용하여 TTF 파일을 열고, 그것이 오두막, 다음 말한다면, 글꼴의 이름을 볼 수 font-family: 'Cabin';