CSS에서 ttf 파일 사용

Question

이 경우 로컬로 저장되는 맞춤 글꼴을 사용하는 것에 대한 지식이 있다면 이와 비슷한 것을 사용하게됩니다.

@font-face { 
    font-family: 'theFontFamily'; 
    src local('the font'), 
     local('the-font'), 
     url(path/to/the-font); 
} 

.fontClass { 
    font-family: 'theFontFamily', extra_settings; 
} 

이렇게 로컬로이 font을 사용하면이 기능이 작동 할 것으로 예상하십니까?

@font-face { 
    font-family: 'Pacifico'; 
    src: local('Pacifico Regular'), 
     local('Pacifico-Regular'), 
     url(resources/fonts/Pacifico.ttf); 
} 

.logo-container { 
    font-family: 'Pacifico', cursive; 
} 

시도 할 때 코드는 글꼴을 원하는 글꼴로 변경하지 않습니다. 이 모양입니다.

난 그냥 다음과 같은 코드가 작동하여 가져 오기 링크, <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">를 사용하는 경우 반면.

.logo-container { 
    font-family: 'Pacifico', cursive; 
} 

이것은 다음과 같습니다.

은 아마 간단한 실수를하고 사람이 고정 나를 도울 수있을 것 있다면 감사하겠습니다.

Answer 1

원본 URL을 올바르게 연결했는지 확인하십시오.

충분한 기본이다

@font-face { 

    font-family: 'myPacifico' ; 
    src: url('/resources/fonts/Placifico.ttf') format('truetype'); 

} 

, 다음 사용 ... .logo 컨테이너 {이 경우

 font-family: 'myPacifico', san-serif;  } 

산 세리프 대체가보십시오. 이 경우, ive는 일반 ttf 파일에 링크됩니다. 굵은 글씨체와 다른 글씨체의 경우 다른 @ font-face의 다른 이름으로 링크해야합니다.

Answer 2

아마도이 (100 % 테스트 할 수없이 확실히 말할 까다로운) 작동합니다

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.eot'); 
    src: url('Pacifico-Regular.eot?#iefix') 
     url('Pacifico-Regular.woff2') format('woff2'), 
     url('Pacifico-Regular.woff') format('woff'), 
     url('Pacifico-Regular.ttf') format('truetype'), 
     url('Pacifico-Regular.svg#svgFontName') format('svg'); 
} 

그냥 로컬 트루 타입 글꼴 사용하려면 : 마음에

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.ttf'); 
} 

곰을 당신이해야 최고 수준의 브라우저 호환성을위한 트루 타입 글꼴 이상을 보유하고 있지만, TTF만으로 테스트 할 경우 TTF 버전을 언급하지 않는 라인은 삭제할 수 있습니다.