CSS @ font-face, Firefox ile çalışmıyor, ancak Chrome ve IE ile çalışıyor

Aşağıdaki kod IE 7'nin yanı sıra Google Chrome beta sürümünde de çalışmaktadır. Firefox'un etki alanları arası içe aktarma konusunda çok kolay olmadığını biliyorum, çünkü CSS dosyalarımın nasıl dahil edildiğiyle ilgili bir sorun olduğundan şüpheleniyorum.

Ancak bunların tümü statik HTML'dir ve web alanları arası bir soru yoktur.

Açılış sayfam.html'de şöyle bir CSS içe aktarma işlemi gerçekleştiriyorum:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Main.css içinde şöyle başka bir ithalat var:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

ve type.css içinde aşağıdaki bildirimler var:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

Type.css ile aynı konumda "font" adlı bir dizin var. Bu yazı tipi dizini tüm woff / ttf / svg dosyalarını vb. İçerir.

Ben bunun üstüne düştüm. Chrome ve IE'de çalışır, ancak Firefox'ta çalışmaz . Bu nasıl mümkün olabilir? Neyi kaçırıyorum?

SİTEYİ YERELDE ÇALIŞTIRMA ( file:///)

Firefox file:///varsayılan olarak çok katı bir "file uri origin" ( ) politikasıyla gelir: tıpkı diğer tarayıcılar gibi davranmasını sağlamak için şu tercihe gidin about:config, filtreleyin fileurive aşağıdaki tercihi değiştirin:

security.fileuri.strict_origin_policy

False olarak ayarlayın; yerel yazı tipi kaynaklarını farklı yol düzeylerine yükleyebilmeniz gerekir.

YAYINLANMIŞ SİTE

Aşağıdaki yorumuma göre ve sitenizi dağıttıktan sonra bu sorunu yaşıyorsanız, sorununuzun etki alanları arası bir sorun olarak yapılandırılıp yapılandırılmadığını görmek için ek bir başlık eklemeyi deneyebilirsiniz: göreceli yollar belirttiğiniz için, ama yine de denemek istiyorum: .htaccess dosyanızda, istenen her .ttf / .otf / .eot dosyası için ek bir başlık göndermek istediğinizi belirtin:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Açıkçası, herhangi bir fark yaratmasını beklemezdim, ama denemeye değer o kadar basit: başka yazı tipi yazı tipi için base64 kodlamayı kullanmaya çalışın , çirkin ama aynı zamanda işe yarayabilir.

Burada güzel bir özet var

.Htaccess'inize aşağıdakileri eklemenin yanı sıra: (teşekkürler @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

.Htaccess dosyasına webfont mime türlerini açıkça eklemeyi deneyebilirsiniz ... şöyle:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Sonunda, .htaccess dosyam şöyle görünüyor (web fontlarının tüm tarayıcılarda çalışmasını sağlayan bölüm için)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

Ben de bu problemi yaşadım. Cevabı burada buldum: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Bu, firefox'ta çalışan çözümün bir örneğidir, bu satırı yazı tipi yüzü css'nize eklemeniz gerekir:

src: local(font name), url("font_name.ttf");

Bunu burada bırakacağım çünkü iş arkadaşım ilgili bir "font-face firefox üzerinde çalışmayan ama başka her yerde" sorununa bir çözüm buldu.

Sorun sadece Firefox'un yazı tipi-aile bildirimiyle uğraşmasıydı, bu düzeltildi:

body{ font-family:"MyFont" !important; }

Not: Ayrıca html5boilerplate kullanıyordum.

Aynı sorunu yaşıyordum. @ Font-face kuralıyla H1, H2 veya hedeflediğiniz stil için kodunuzu iki kez kontrol edin. font-family: 'custom-font-family' Arial, Helvetica etcFirefox dışında her tarayıcıda iyi görünüyordu sonra koma eksik buldum . Komayı ekledim ve işe yaradı.

Ben tam olarak aynı problem vardı. Ben "fontlar" adlı yeni bir klasör oluşturmak ve wp_content koymak zorunda kaldı. Buna tarayıcımdan http://www.example.com/wp-content/fonts/CANDY.otf gibi erişebilirim

Daha önce, fontlar klasörü CSS dosyam ile aynı dizindeydi ve @ font-face şöyle görünüyordu:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Yukarıda belirttiğim gibi, bu Firefox'ta değil, yalnızca Chrome ile çalışıyordu. Şimdi çalışıyor çünkü mutlak bir yol kullandım:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Bir mac üzerinde ff4 çalışan tam olarak bu sorun vardı. Çalışan bir yerel geliştirme sunucusu vardı ve @ yazı tipi yüz bildirimi iyi çalıştı. Yaşamak için taşındım ve FF ilk sayfa yüklemesinde doğru türü 'yanıp söner', ancak daha derine inildiğinde yazı tipi varsayılan olarak tarayıcı stil sayfasına ayarlandı.

.Htaccess dosyasına aşağıdaki bildirimi eklerken çözümün yattığını buldum

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

yoluyla bulundu

Henüz kimsenin bahsetmediği kolay bir çözüm, base64 kodlaması kullanarak yazı tipini doğrudan css dosyasına gömmek.

Fontsquirrel.com kullanıyorsanız, font-yüz Kit Oluşturucu'da uzman modunu seçin , aşağı kaydırın ve CSS Seçenekleri altında Base64 Kodlama'yı seçin - indirilen Font-Kit takıp oynatmaya hazır olacaktır.

Bu ayrıca, daha az bir http isteği gerektirdiğinden sayfa yükleme süresini azaltmanın yan yararıdır.

Dosya adlarında belirli karakterler varsa bazı yazı tiplerinin firefox'ta sorunları olduğunu belirtmek isterim. Son zamanlarda dosya adı '237D7B_0_0' olan 'Modulus' yazı tipi ile ilgili bir sorunla karşılaştım. Dosya adındaki alt çizgileri kaldırmak ve css'yi yeni dosya adıyla eşleşecek şekilde güncellemek bu sorunu çözdü. Benzer karakterlere sahip diğer yazı tiplerinde çok merak edilen bir sorun yok ... muhtemelen firefox'ta bir hata. Dosya adlarını yalnızca alfasayısal karakterlere saklamanızı öneririm.

Özellikle bu yazı tipi için Google Yazı Tipi API'sını kullanmanız gerekir:

http://code.google.com/webfonts/family?family=Droid+Sans

FontSquirrel'in kit oluşturucusunu kullanmaya devam etmek istiyorsanız, yerel yazı tipi sorunlarını ortadan kaldırmak için Smiley kesmek seçeneğini kullanın. Bir kit oluşturduktan sonra, oluşturulan demo.html dosyasının FireFox'ta çalışıp çalışmadığını kontrol edin. Eminim öyledir. Şimdi sunucunuza yükleyin - Eminim FontSquirrel harika olduğu için orada da çalışır.

Ancak, oluşturulan kit kodunu projenize entegre ederken kırdıysanız, standart hata ayıklama yöntemlerini kullanın - 404'leri kontrol edin ve sorunu bulana kadar satır satır gidin. WOFF kesinlikle FF'de çalışmalıdır, bu yüzden başlamak için iyi bir yer.

Son olarak, bunların hiçbiri işe yaramazsa, FireFox'u güncelleyin. Tüm bunları en son kullandığınızı varsayarak yazdım; ancak hangi sürümü kontrol ettiğinizi belirtmediniz, bu da sizin probleminiz olabilir.

Yönergelerinizdeki yerel kaynak bildirimini bozmaya çalışın @font-face.

Firefox'ta veya Google Yazı Tipi API'sında, yazı tipi yerel olarak yüklüyse ve tanımlanan yerel adla eşleştiğinde yazı tipi çeşitlerinin kullanılmasını engelleyen bilinen bir hata var:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Yerel bildirimi etkin bir şekilde çözmek için, yerel kaynak dizenizi saçmalık haline getirin. Bunun için genel kabul gören kural bir gülen yüz unicode karakteri ( "☺") kullanmaktır. Neden? Paul Irish'ın blogunda harika bir açıklaması var:

http://paulirish.com/2010/font-face-gotchas/#smiley

Bunu yerel dosyalarda mı yoksa bir Web sunucusunda mı test ediyorsunuz? Farklı dizinlerdeki dosyalar, alanlar arası kurallar için farklı alanlar olarak kabul edilir, bu nedenle yerel olarak test ediyorsanız alanlar arası kısıtlamalara maruz kalabilirsiniz.

Aksi takdirde, muhtemelen sorunun oluştuğu bir URL'ye yönlendirilmeniz yardımcı olacaktır.

Ayrıca, herhangi bir CSS sözdizimi hatası veya diğer hataların bildirilip bildirilmediğini görmek için Firefox hata konsoluna bakmanızı öneririm.

Ayrıca, muhtemelen yazı tipi ağırlığı istediğinizi belirtmek isterim: ikinci @ font-face kuralında kalın.

Bu sorunla karşılaştığımda bir .htaccess Erişim Denetimine İzin Verme Kuralı kullanmak benim için çalışmadı.

Bunun yerine, web.config dosyasındaki IIS'ye aşağıda gösterilen system.webServer bloğunu ekleyin.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Bu benim için bir cazibe gibi çalıştı. Belirli bir etki alanına erişimi kısıtlamanız gerekiyorsa, * ile etki alanını değiştirin.

Firefox'ta düzgün görüntülenmesi için bir yazı tipi almakla aynı sorunu yaşıyordum. İşte benim için çalıştığım şey. Url özelliğinde yazı tipini tutan dizinden önce eğik çizgi ekleyin. İşte benim önceki ve sonraki sürümleri:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

url'deki 'yazı tiplerinden' önce gelen eğik çizgiyi fark ettiniz mi? Bu, tarayıcıya kök dizinden başlamasını ve ardından kaynağa erişmesini söyler. En azından benim için - Sorun Çözüldü.

Harici yazı tiplerini içe aktarmaya çalışıyorsanız, Firefox ve diğer tarayıcınızda en sık karşılaşılan sorunlardan biriyle karşılaşırsınız. Yazı tipiniz google Chrome'da veya diğer tarayıcılardan birinde iyi çalışıyor, ancak her tarayıcıda iyi çalışmıyor.

Bu tür hataların birçok nedeni vardır, bu sorunun arkasındaki en büyük nedenlerden biri önceki tanımlanmış yazı tipidir. Her bir CSS kodu satırınızın sonunda! Önemli anahtar kelimeyi aşağıdaki gibi eklemeniz gerekir:

Misal:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Açıklama: Yukarıdaki kodu CSS dosyanıza veya kodunuza buraya girin. Yukarıdaki örnekte "Hacen Saudi Arabia" yerine font-ailenizi ve url'yi font dizininize göre değiştirin.

Css kod tarayıcınıza! İmportant girerseniz otomatik olarak bu bölüme odaklanın ve daha önce kullanılmış olan özelliği geçersiz kılın. Daha fazla ayrıntı için şu adresi ziyaret edin: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Eğer 404 alırsanız firebug ile kontrol edebilir misiniz? Geçişte sorunlar yaşadım ve uzantının aynı olduğunu gördüm ama linux file.ttf dosyadan farklı.TTF ... ve firefox hariç tüm tarayıcılarla çalıştı.

Yardım etmek isterdim!

Bu, yazı tipi yüzünüzün yollarını nasıl ayarladığınızla ilgili bir sorundur. Yolu "/" ile başlatmadığınız için, Firefox yazı tipini stil sayfasının bulunduğu yola göre bulmaya çalışacaktır. Temel olarak, Firefox yazı tipinizi "root / css / font" dizininde değil, "root / font" dizini. Yazı tipi klasörünü css klasörüne taşıyarak veya yazı tipi yollarınızın başına / ekleyerek bunu kolayca düzeltebilirsiniz.

Şunu deneyin:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

Bunu dene....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Benzer bir sorun yaşadım. Tüm dosyalar aynı etki alanından gelmesine rağmen fontsquirel demo sayfası FF'de çalışıyordu, ancak kendi sayfam değil!

Stil sayfamı mutlak bir URL ile bağladığım ortaya çıktı (http://example.com/style.css), böylece FF farklı bir alandan geldiğini düşündü. Stil sayfası bağımı href'i /style.css olarak değiştirmek benim için işleri düzeltti.

Belki de probleminiz, özellikle boşlukların ve kısa çizgilerin kullanımı (veya olmaması) ile ilgili bir adlandırma sorunudur.

Ben font- / aile-isimleri etrafında isteğe bağlı tırnak (') yerleştirerek sabit olduğunu düşündüm similair sorunu yaşıyordum, ama aslında örtük bir adlandırma sorunu düzeltildi.

CSS spesifikasyonu hakkında tamamen güncel değilim ve farklı müşterilerin özellikleri nasıl yorumladığı konusunda (belirsiz) bazı belirsizlikler var. Ayrıca, PostScript adlandırma kurallarıyla da ilgili görünüyor, ancak yanılıyorsam lütfen beni düzeltin!

Her neyse şimdi anladığım kadarıyla, beyanınız iki farklı aroma karışımını kullanıyor.

@font-face {
  font-family: "DroidSerif Regular";

Droid'i , Sans ve Serif'in üyesi olduğu gerçek aile adı olarak düşünürseniz , tıpkı çocukları Sans Regular veya Serif Bold gibi , o zaman ya tanımlayıcıları sabitlemek için her yerde boşluk kullanırsınız, yoksa boşlukları kaldırır ve CamelCasing'i kullanırsınız. familyName ve alt tanımlayıcılar için kısa çizgiler.

Beyanınıza uygulandığında, şöyle görünecektir:

@font-face {
  font-family: "Droid Serif Regular";

VEYA

@font-face {
  font-family: DroidSerif-Regular;

Her ikisinin de tırnak içinde olsun veya olmasın tamamen yasal olması gerektiğini düşünüyorum, ancak çeşitli müşteriler arasında bununla karışık bir başarı elde ettim. Belki, bir gün, bu / bu isseu / s ile ilgili detayları anlamak için biraz zamanım var.

Bu makaleyi, bazı hususları anlamada yararlı buldum: http://mathiasbynens.be/notes/unquoted-font-family

Bu makalede PostScript hakkında daha fazla ayrıntı ve Adobe teknik özellik PDF'sine bazı bağlantılar bulunmaktadır: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Ayarlarla uğraşmanıza gerek yok, sadece yazı tipi ailesinden tırnak ve boşlukları kaldırın:

bu

body {font-family: "DroidSerif Regular", serif; }

bu olur

body {font-family: DroidSerifRegular, serif; }

Benim durumumda, yazı tipi-yüz stil kodu ekleme ile ilgili problemi çözdüm

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

index.html veya php sayfanızdaki başlıkta, stil etiketinde direclty. Benim için çalışıyor!

Bu nedenle bu sorun için en iyi Google sonuçlarından biri bu benim için bu sorunu çözen ne eklemek istiyorum:

Ben yazı tipi yüz src biçimini (opentype) kaldırmak zorunda kaldı, sonra Firefox da çalıştı. Bundan önce Chrome ve Safari'de iyi çalıştı.

Kodunuzdan değil, Firefox yapılandırmanızdan kaynaklanıyor olabilir.

Bu deneyin Tool bar Batı için Unicode

View > Text Encoding > Unicode

Aynı sorunu yaşadım ve içerik için meta ekleyerek çözdüm:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

HTML'nizde Unicode metinleriniz varsa bu Firefox ve Edge'de olur.

Yazı tipi bildiriminde svg kullandığımda sözdizimini nasıl oluşturduğunuzu bilmiyorum, ancak Font Squirel, sadece bir yazı tipinden kurşun geçirmez sözdizimi yazı tipi yüzü oluşturmak için gerçekten iyi bir araca sahip.

http://www.fontsquirrel.com/fontface/generator

URL'nin font-face etiketinin yolunda kullanılması da olabilir. "Http://domain.com" kullanırsanız Firefox'ta çalışmaz, benim için "http://www.domain.com" olarak değiştirildi.

Benim sorunum, Windows 'font.TTF' ve firefox beklenen 'font.ttf' yazı tipini adlandırmasıydı.Linux'da projemi açtıktan sonra, yazı tipini propper adına yeniden adlandırdı ve her şey işe yaradı.