CSS @ font-face не работает с Firefox, но работает с Chrome и IE - PullRequest
Новая
       104

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

187 голосов
/ 18 мая 2010

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

Но это всего лишь статический HTML, и нет никаких сомнений-domain.

На моем Landing-page.html я делаю импорт CSS следующим образом: 

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

В файле main.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; }

У меня есть каталог с именем "font" в том же месте, что и type.css.Этот каталог шрифтов содержит все файлы woff / ttf / svg и т. Д.

Я в тупике. Работает в Chrome и IE, но не в Firefox .Как это возможно?Чего мне не хватает?

Ответы [ 28 ]

0 голосов
/ 13 сентября 2011
0 голосов
/ 01 ноября 2011

Может также использоваться URL в пути тега font-face. Если вы используете «http://domain.com", это не работает в Firefox, для меня изменив его на« http://www.domain.com" сработало.

0 голосов
/ 11 января 2018

Если вы пытаетесь импортировать внешние шрифты, вы сталкиваетесь с одной из наиболее распространенных проблем с вашим Firefox и другим браузером. Некоторое время ваш шрифт хорошо работает в Google Chrome или другом браузере, но не в каждом браузере.

Существует множество причин для этого типа ошибки. Одна из главных причин этой проблемы - предыдущий определенный шрифт. Вам нужно добавить ключевое слово! Important после окончания каждой строки кода CSS, как показано ниже:

Пример: 

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

Описание: Введите приведенный выше код в свой файл CSS или код здесь. В приведенном выше примере замените «Hacen Saudi Arabia» на ваше семейство шрифтов и замените URL в соответствии с вашим каталогом шрифтов.

Если вы введете! Важное в вашем браузере кода CSS, автоматически сфокусируйтесь на этом разделе и переопределите ранее использованное свойство. Для более подробной информации посетите: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

0 голосов
/ 04 января 2016

В связи с этим это один из лучших результатов Google для этой проблемы. Я хотел бы добавить, что решило эту проблему для меня:

Мне пришлось удалить формат (opentype) из src шрифта-face, тогда это работало и в Firefox. До этого все работало в Chrome и Safari.

0 голосов
/ 27 мая 2017

Может быть, это не из-за вашего кода, а из-за вашей конфигурации Firefox.

Попробуйте это от Tool bar Western до Unicode 

View > Text Encoding > Unicode
0 голосов
/ 08 марта 2012

У меня была похожая проблема. Демонстрационная страница fontsquirel работала в FF, но не на моей собственной странице, хотя все файлы были из одного домена!

Оказалось, что я связывал свою таблицу стилей с абсолютным URL-адресом (http://example.com/style.css)), поэтому FF решила, что она идет из другого домена. Изменение ссылки на мою таблицу стилей href на /style.css вместо этого исправило для меня вещи.

0 голосов
/ 11 января 2018

У меня была та же проблема, и я решил ее, добавив мета для контента: 

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

Это происходит в Firefox и Edge, если у вас есть текст Unicode в html.

0 голосов
/ 18 мая 2010

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

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

Страница:
...