web-dev-qa-db-ja.com

すべてのブラウザにttf形式のカスタムWebサイトフォントを埋め込むにはどうすればよいですか？

私のウェブサイトでは、アップロードしたカスタムフォントを使用しています。断続的に作業するタイミングを選択しているようです。一部のコンピューター/ブラウザーでは機能しますが、他では機能しません。また、正しくマップされます。

これは私のコードです：

<style type="text/css">
@font-face {
    font-family: 'AgencyFBRegular';
    src: url('agencyr.eot');
    src: url('agencyr.eot?#iefix') format('embedded-opentype'),
         url('agencyr.woff') format('woff'),
         url('AGENCYR.TTF') format('truetype'),
         url('agencyr.svg#AgencyFBRegular') format('svg');
}


h3 {    font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
    border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px; 
</style>

友人のラップトップを使って表示するまで、どこでも機能していると思いました。

私が間違っているところを見ることができますか？

更新：フォントCSSを更新しました。動作しているようですが、現在はiOSでは動作していません。

cssfontsfont-facetrue-type-fonts
28
Sami Dz Hamida

次のコードが機能するはずです。

@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.eot") /* EOT file for IE */
}
@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}

h3 {
    font-family:'Agency FB', sans-serif;
    font-size: 26px;
    font-weight:normal;
    text-align: left;
    line-height: 100%;
    border-bottom: 1px solid #484848;
    padding-bottom: 5px;
    margin-bottom:7px;
}
35
Gangadhar

大文字なしでフォントのファイル名を変更する必要があります。このように：from AGENCYR.TTFからagencyr.ttf

そしてあなたのcssファイルで：

src: url('agencyr.ttf');
7
Sakata Gintoki