Загрузка шрифта в Safari в порядке, но не в Chrome или Firefox (все на Mac)

0

Хорошо, я добрался до стадии вытягивания волос.

Я создал простой пример. В основном Safari отображает оба шрифта правильно, но оба Chrome и Firefox не будут отображать шрифт Helvetica. Оба шрифта находятся в одной папке вместе с этим тестовым HTML. Какие-нибудь идеи? - Я пробовал Helvetica Heavy Condensed из двух источников, оба эффекта. См. Изображения.

<head>
<style>
@font-face 
{
    font-family: "HelvHvCn";
    src: url('HelvHvCn.ttf') format('truetype');
}
@font-face 
{
    font-family: "BebasNeue";
    src: url('BebasNeue-webfont.ttf') format('truetype');
}
h1
{
    font-family: HelvHvCn;
}
h2
{
    font-family: BebasNeue;
}
</style>
</head>
<body>
<h1>This font only works in Safari</h1>
<h2>This font works in Safari, Chrome and Firefox</h2>
</body>
  • 0
    Извините, пока не разрешено загружать изображения. В основном шрифт <h2> в порядке, но шрифт <h1> отображается нормально в Safari, но возвращается к Times New Roman в Chrome и Firefox. Любые предложения приветствуются.
Теги:

1 ответ

0

Реализации Webfont немного застенчивы, поэтому вам нужно использовать тщательно выраженную @font-face декларацию, чтобы сделать ее рендерингом надежно xbrowser.

Предоставляя вам лицензию на использование его в качестве веб-сайта, запустите TTF через службу, например http://www.fontsquirrel.com/, чтобы создать веб-сайты eot, woff и svg, затем попробуйте этот синтаксис в вашем CSS...

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

body {
       font-family: 'your-custom-font', sans-serif;
}

Вероятно, также стоит отметить, что файлы woff иногда выглядят отлично на Mac Chrome и довольно разрываются на Win Chrome. Возможно, вам захочется сгладить с -webkit-font-smoothing: antialiased; и в некоторых edgecases настраивают порядок шрифта, или даже вообще отбрасывают отскок.

Поделиться
  • 0
    Большое спасибо за это, я использую Helvetica без лицензии, но в качестве быстрой проверки я только что использовал свой установленный на Mac Helevetica Heavy Condensed TTF, и он отлично работает. Так что есть проблема с шрифтом, который я использую, который не нравится Chrome или Firefox, странно, что Safari с этим согласен.
  • 0
    Не беспокойтесь, надеюсь, вы разберетесь с этим :) Я все еще был бы склонен генерировать альтернативные версии файлов - я бы предположил, что системные шрифты, вероятно, будут работать нормально, даже если @ font-face не работает?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню