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'); 
} 

だけでローカルにTrueTypeフォントを使用するには：

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

ベア心​​の中であなたがすべき最高レベルのブラウザ互換性のためのTrueTypeフォント以上のものがありますが、TTFだけのテストでは、TTFバージョンを参照していない行はすべて削除できます。