Firefox 3.5 на Mac и @ font-face - PullRequest
Новая
       9

Firefox 3.5 на Mac и @ font-face

6 голосов
/ 20 января 2010

У меня проблема с @ font-face. На самом деле он работает безупречно в Safari, Internet Explorer 7+ и Firefox для Windows, но совсем не работает в Firefox для Mac.

Я использую код из пуленепробиваемой статьи @ font-face

Вот мой код: 

@font-face {
    font-family: "QlassikMediumRegular";
    src: url("../fonts/Qlassik_TB.eot");
    src: local("Qlassik Medium Regular"), local("QlassikMedium"), url("../fonts/Qlassik_TB.ttf") format("truetype")
}

@font-face {
    font-family: "QlassikBoldRegular";
    src: url("../fonts/QlassikBold_TB.eot");
    src: local("Qlassik Bold Regular"), local("QlassikBold"), url("../fonts/QlassikBold_TB.ttf") format("truetype")
}

Вот ссылка на мой сайт в вопросе: текст ссылки

Ответы [ 2 ]

2 голосов
/ 15 июня 2012

Я обычно использую более расширенное объявление @ font-face: 

@font-face {
font-family: 'TypewriterOldstyle';
src: url('../fonts/typeo-webfont.eot');
src: url('../fonts/typeo-webfont.eot?#iefix') format('eot'),
     url('../fonts/typeo-webfont.woff') format('woff'),
     url('../fonts/typeo-webfont.ttf') format('truetype'),
     url('../fonts/typeo-webfont.svg#webfonty9r23iiq') format('svg');
font-weight: normal;
font-style: normal;
}

Вы можете попробовать создать в http://www.fontsquirrel.com/fontface/generator

0 голосов
/ 02 апреля 2014

Была такая же проблема, шрифт выдал ошибку 301, говоря, что у меня нет доступа к файлу шрифта.

Что лучше всего подходит для меня - это поместить файл шрифта в тот же каталог, что и файл .css, без проблем с .nytaccess или другим файлом конфигурации сервера.

Итак, у меня есть один внешний файл fonts.css, содержащий все строки шрифта css в каталоге шрифтов. Затем я могу включить этот файл .css на страницу, где я хотел бы использовать этот шрифт. Убедитесь, что вы не создаете дополнительный каталог, чтобы вы могли вызывать шрифт без какого-либо каталога.

подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

...