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

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 ]

2 голосов
/ 15 сентября 2010

В частности, для этого шрифта вы должны использовать Google Font API:

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

Если вы все еще хотите использовать генератор комплектов FontSquirrel, используйте опцию Smiley hack для устранения локальных проблем со шрифтами. После того, как вы сгенерировали комплект, убедитесь, что сгенерированный файл demo.html работает в FireFox. Бьюсь об заклад, это так. Теперь загрузите его на свой сервер - готов поспорить, он тоже там работает, так как FontSquirrel потрясающий.

Однако, если вы сломали сгенерированный код набора при интеграции его в свой проект, используйте стандартные методы отладки - проверяйте 404 и переходите построчно, пока не найдете проблему. WOFF определенно должен работать в FF, так что это хорошее место для начала.

Наконец, если ничего из этого не работает, обновите FireFox. Я написал все это, предполагая, что вы используете последнюю версию; но вы не указали, какую версию вы регистрируете, так что это тоже может быть вашей проблемой.

1 голос
/ 06 апреля 2014

У меня возникла та же проблема с правильным отображением шрифта в Firefox. Вот то, что я нашел для меня. Добавьте косую черту перед каталогом, содержащим шрифт в атрибуте url. Вот мои версии до и после: 

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? Это говорит браузеру начать с корневого каталога, а затем получить доступ к ресурсу. По крайней мере, для меня - проблема решена.

1 голос
/ 18 мая 2010

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

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

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

Также я хотел бы отметить, что вы, вероятно, хотите использовать font-weight: bold во втором правиле @ font-face.

1 голос
/ 26 июля 2012

Использование правила разрешения доступа .htaccess для управления доступом не помогло мне, когда я столкнулся с этой проблемой.

Вместо этого в IIS в файле web.config вставьте блок system.webServer, показанный ниже. 

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

Это сработало как очарование для меня. Если вам нужно ограничить доступ к определенному домену, замените * на домен.

0 голосов
/ 01 ноября 2013

В моем случае я решил проблему с вставкой кода стиля шрифта 

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

direclty в заголовке вашей страницы index.html или php, в теге style. У меня работает!

0 голосов
/ 11 мая 2013

Моя проблема заключалась в том, что Windows назвала шрифт 'font.TTF', а firefox ожидал 'font.ttf'. Я увидел, что после открытия моего проекта в linux переименовал шрифт в propper name и все работает

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

Можете ли вы проверить с firebug, если у вас есть 404?У меня были проблемы с пропуском, и я обнаружил, что расширение было таким же, но linux file.ttf отличается от file.TTF ... и работал со всеми браузерами, кроме Firefox.*

0 голосов
/ 08 декабря 2012

Нет необходимости возиться с настройками, просто удалите кавычки и пробелы из семейства шрифтов:

это 

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

становится этим 

body {font-family: DroidSerifRegular, serif; }
0 голосов
/ 24 ноября 2012

Возможно, ваша проблема связана с именами, особенно в том, что касается использования (или нет) пробелов и дефисов.

У меня была проблема с similair, которую я решил исправить, поместив необязательные кавычки (') вокруг имен шрифтов / фамилий, но это фактически неявно исправило проблему с именами.

Я не совсем в курсе CSS-спецификации, и есть (на мой взгляд) некоторая двусмысленность в том, как разные клиенты интерпретируют спецификации. Кроме того, это также относится к соглашениям об именах PostScript, но, пожалуйста, исправьте меня, если я ошибаюсь!

В любом случае, насколько я понимаю, в вашей декларации используется смесь из двух возможных различных вкусов. 

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

Если вы сочтете Droid фактической фамилией, членами которой являются Sans и Serif , как и для например, их дети Sans Regular или Serif Bold , затем вы либо используете пробелы везде для конкатенации идентификаторов, либо ИЛИ удаляете пробелы и используете CamelCasing для familyName и дефисы для подидентификаторов.

Применительно к вашей декларации это будет выглядеть примерно так: 

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

OR 

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

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

Мне показалась эта статья полезной для понимания некоторых аспектов: http://mathiasbynens.be/notes/unquoted-font-family

Эта статья содержит некоторые дополнительные сведения о PostScript, а также некоторые ссылки на спецификацию Adobe в формате PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

0 голосов
/ 14 сентября 2010

Это проблема с тем, как вы настраиваете пути вашего font-face. Поскольку вы не начинали путь с «/», Firefox будет пытаться найти шрифт на основе пути, в котором находится таблица стилей. Поэтому в основном Firefox ищет ваш шрифт в каталоге «root / css / font» вместо каталог «root / font». Это можно легко исправить, переместив папку шрифтов в папку 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";
}
Страница:
...