Tamam bunun için biraz zaman geçirdim ve şimdi şaşkın. Aşağıdaki kod Google Chrome beta gibi IE 7 çalışır. Ancak, bu Firefox ile ilgili bir sorun var gibi görünüyor. Bunun etki alanları arası ithalat hakkında CSS dosyalarımı Firefox çok kolay değil biliyorum dahil, neden bir sorun olarak şüphe ediyorum.

Ama bu sadece statik html ve etki alanları arası soru var.

Benim landing-page.html bu kadar gibi bir CSS almak istiyorum:

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

Ana içinde.css gibi bir ithalat var:

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

ve içinde yazın.css aşağıdaki bildirimleri 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; }

Bir dizin "" tip olarak aynı konumda.yazı aradım css. Bu yazı dizin svg dosyalar/ttf/etc tüm woff içerir.

Bu konuda kafam allak bullak oldu.Firefox Chrome ve IE ama çalışmıyor. Bu nasıl mümkün olabilir? Neyi kaçırıyorum?

Teşekkürler.

YEREL OLARAK ÇALIŞAN SİTE (file:///)

Firefox ile birlikte bir çok katı bir "dosya uri kökeni" (file:///) İlkesi tarafından varsayılan: öyle olması için davranır gibi diğer tarayıcılar, gitmek about:config filtre fileuri ve geçiş aşağıdaki tercih:

security.fileuri.strict_origin_policy

Ayarlayınyanlışve farklı bir yol düzeyleri arasında yerel kaynakları yazı tipi yüklemek için olması gerekir.

SİTE YAYINLADI

Başına benim yorumun altında, ve siz bu sorunu yaşıyor sonra dağıtma sitesi, sen-ebil denemek için bir eklenti ek başlığına bakın Eğer sorun yapılandırır kendisi gibi bir çapraz etki alanı sorunu: olmamalı, bu yana olduğunuzu belirten göreli yollar, ama ben denemek her neyse: senin .debug dosyası belirtin her biri için ek bir başlık göndermek istiyor ./ttf./rahat.eot dosya talep ediliyor

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

Açıkçası, herhangi bir fark beklemiyorum, ama denemeye değer çok basit: kullanmak için başka bir deneyinbase64 kodlamayazı tipi yazı tipi için, çirkin ama çok çalışıyor olabilir.

Güzel bir özet here mevcuttur