2012-03-29 2 views
1

Я использую следующие CSS для определения пользовательских шрифтов на веб-странице:Firefox не распознает специальный шрифт

@font-face 
{ 
    font-family:zapfino; 
    src:url("zapfino.ttf"); 
} 

Далее я определяю идентификатор, который использует это:

#custom_font 
{ 
    font-family:zapfino; 
    font-size:18px; 
} 

Я проверили страницу на Safari и Chrome, и она отлично работает. Однако в firefox шрифт не отображается, он возвращается к умолчанию. Извините, если это repost, но я искал StackOverflow и не могу найти ответ! Кто-нибудь знает, почему это происходит? см. здесь: www.moosecodes.com (его еще в стадии строительства! прошу прощения за беспорядок!)

+3

Я действительно верю, что имя должно быть в кавычках. Попробуйте изменить объявление семейства шрифтов на «Zapfino» как в объявлении @ font-face, так и при определении семейства шрифтов на элементах. Кроме того, вы должны проверить лицензию своего шрифта Zapfino. Поскольку это коммерческий шрифт, он не может быть лицензирован для использования с @ font-face. – biggles

+0

@jlego Я изменил все вхождения font-family: zapfino; к следующему: font-family: «zapfino»; и это ничего не изменило. – Moose

+0

СМ.: Http://caniuse.com/#feat=fontface –

ответ

3

jlego прав - вы должны проверить FontSquirrel - у них есть отличный инструмент для создания вашего набора и преобразования файлов для вас, и вы должны всегда быть уверены, что шрифт легально использовать на вашем сайте.

Однако Firefox и Chrome должны поддерживать TTF, который является форматом, который вы используете.

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

+0

Я пойду с таким подходом, так как это самый быстрый способ исправить проблему. Я думаю, ваше право на поврежденный файл ... как вы это проверили? Я собираюсь играть в нее безопасно и найти шрифт, который можно использовать бесплатно и выглядит хорошо .. Таким образом, я не буду добавлять лишние ненужные и грязные хаки в свой код ... и мне не придется беспокоиться об авторских правах. Кстати, шрифт принадлежит Apple ... я думаю ... – Moose

+0

Я загрузил файл на свой компьютер, и когда я действовал так, как будто я собирался его установить, Windows говорит мне, что он поврежден. –

3

Каждый браузер только считывает один тип файла для веб-сайтов. К сожалению, это разные форматы файлов. Чтобы шрифт отображался правильно во всех браузерах, вам понадобятся 4 разных типа файла шрифта: TTF, WOFF, SVG & EOT. Ваш код будет выглядеть примерно так:

@font-face { 
font-family: 'Zapfino'; 
    src: url('Zapfino.eot'); 
    src: url('Zapfino.eot?#iefix') format('embedded-opentype'), 
     url('Zapfino.woff') format('woff'), 
     url('Zapfino.ttf') format('truetype'), 
     url('Zapfino.svg#SansumiRegular') format('svg'); 
} 

Этот код основан на таблицу стилей в комплекте с FontSquirell шрифтов.

У FontSquirell есть конвертер, но вам необходимо проверить свою лицензию. Zapfino - коммерческий шрифт, принадлежащий Adobe (?), И насколько я знаю, использование их шрифтов с @ font-face является нарушением EULA шрифтов.

TypeKit предлагает коммерческие шрифты для использования с шрифтом @ font-face за вознаграждение, которое соответствует листингу EULA.

0

У меня была такая же проблема .... ответ jlego был полезен для меня. Мой шрифт был распознан в Chrome и IE. В FF мой TTF не был распознан до тех пор, пока я не добавлю формат ('truetype') в свой файл css.