CSS, @font-face не работающий с Firefox, но работающий с Chrome и IE

Следующий код работает в бете Google Chrome, а также IE 7. Однако Firefox, кажется, имеет проблему с этим. Я подозреваю, что это проблема того, как мои файлы CSS включены, вызывают, я знаю, что Firefox не является слишком дружественным о междоменном импорте.

Но это - все просто статический HTML и нет никакого вопроса междоменных.

На моем landing-page.html я делаю импорт CSS как так:

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

В main.css я имею, другой импортирует как так:

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

и в type.css у меня есть следующие объявления:

@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. Этот каталог шрифта содержит все woff/ttf/svg файлы и т.д.

Я озадачен на этом. Это работает в Chrome и IE, но не на Firefox. Как это возможно? Что я пропускаю?

193
задан ROMANIA_engineer 3 January 2016 в 23:40
поделиться

2 ответа

Вы тестируете это в локальных файлах или вне веб-сервера? Файлы в разных каталогах считаются разными доменами для междоменных правил, поэтому при локальном тестировании вы можете попасть в междоменные ограничения.

В противном случае, вероятно, было бы полезно указать на URL-адрес, где возникает проблема.

Кроме того, я бы предложил взглянуть на консоль ошибок Firefox, чтобы увидеть, сообщаются ли какие-либо синтаксические ошибки CSS или другие ошибки.

Кроме того, я бы отметил, что вы, вероятно, хотите font-weight:bold во втором @font правила.

1
ответ дан 23 November 2019 в 05:28
поделиться

Я не знаю, как вы создали синтаксис, поскольку я никогда не использовал svg в объявлении шрифта, но у Font Squirel есть действительно хороший инструмент для создания пуленепробиваемого синтаксиса font-face только из одного шрифта.

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

-2
ответ дан 23 November 2019 в 05:28
поделиться
Другие вопросы по тегам:

Похожие вопросы: