Tüm tarayıcılar için ttf biçiminde özel bir web sitesi yazı tipini nasıl yerleştiririm?

Question

Web sitemde yüklediğim özel bir yazı tipi kullanıyorum. Zaman zaman çalışmayı seçiyor gibi görünüyor. Bazı bilgisayarlarda/tarayıcılarda çalışır, ancak başkalarına değil. Aynı zamanda doğru haritalanmıştır.

<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> 

ben görüntülemek için bir arkadaşının dizüstü kullanılan kadar her yerde çalıştığımı sanıyordum:

Bu

benim kodudur.

Nerede hata yaptığımı görebiliyor musunuz?

GÜNCELLEME: CSS yazı tipini güncelledim. Çalışıyor gibi görünüyor, ancak şimdi iOS'ta değil.

Answer 1

Büyük harf olmadan yazı tipinizin dosya adını değiştirmeniz gerekir. AGENCYR.TTF den agencyr.ttf

için ve css dosyasında: Bunun gibi

src: url('agencyr.ttf'); 

Answer 2

Aşağıdaki kod çalışması gerekir:

@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; 
}