Веб-шрифты, используемые в резервном шрифте в IE8 - PullRequest
Новая
       46

Веб-шрифты, используемые в резервном шрифте в IE8

3 голосов
/ 02 марта 2011

В настоящее время я пытаюсь внедрить веб-шрифты на сайте, который я создаю, я хочу использовать его как запасной вариант в атрибуте font-family, т.е. если символ не представлен в Arial / Helvetica, тогда он должен быть в пределах веб-шрифта б.

Я понимаю, что это не будет работать в IE6 и 7, но ожидал, что это будет работать в IE8, что тоже не похоже.

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

Заранее спасибо, за любую помощь

Вот мой код CSS: 

@font-face {
    font-family: 'stix';
    src: url('/webfonts/webfont.eot');
    src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold-webfont.eot');
    src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/talic-webfont.eot');
    src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold_italic-webfont.eot');
    src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
    font-weight: bold;
    font-style: italic;

}

body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }

Ответы [ 5 ]

3 голосов
/ 03 марта 2011

В чем преимущество использования STIX в качестве запасного варианта?

Если это предотвращает загрузку шрифта UA, если он не нужен, вам не повезло, такое поведение в настоящее время есть только у webkit https://gist.github.com/478344 Хуже того, IE загрузит все шрифты, определенные в @ font-face, даже если они не упоминаются где-либо еще в CSS.

Если это потому, что STIX не имеет регулярных символов, да, IE работаетчтобы тебя напортачитьЯ бы порекомендовал объединить STIX со свободной гарнитурой, чтобы создать один результат, содержащий все необходимые вам символы.

2 голосов
/ 04 марта 2011

Я использую урезанную версию вашего кода (только для ясности - в этом нет ничего плохого) и тестирую во многих браузерах (с веб-шрифтом STIX, как вы, а не с тем, что я в курсе)если это играет роль), и я вижу странное поведение: откат шрифта в большинстве браузеров работает , но только если исключая все варианты курсива (будь они курсивом илиbolditalic).

Т.е. это работает (100% времени), когда браузеры используют STIX для тех символов, которые не находятся в arial: 

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralbol-webfont.eot');
    font-weight: bold;
    font-style: normal;
}
body {font-family: arial, stix, sans-serif;}

… но это не работает 100% времени (, хотя иногда действительно отображает символы! ): 

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
    font-weight: normal;
    font-style: italic;
}
body {font-family: arial, stix, sans-serif;}

Причина этого в том, чтоПакет шрифтов STIX содержит ошибки.

Чтобы обойти это, откройте пакет шрифтов STIX в FontForge и сохраните - FontForge сообщит вам об ошибках.Исправьте это и только затем импортируйте в FontSquirrel.Резервный шрифт теперь должен работать правильно.

2 голосов
/ 02 марта 2011

Попробуйте использовать конвертер на fontsquirrel.com

0 голосов
/ 21 апреля 2012

Кстати ... IE попытается загрузить формат SVG, поэтому вы должны определить EOT src после svg! (Ошибка IE).

0 голосов
/ 03 марта 2011

Проблема может заключаться в том, что «в Internet Explorer 8 и более ранних версиях поддерживается только одно значение URL ».

Кроме того, вместо использования @ font-face для паденияобратно шрифт, выберите тот, который вы предпочитаете, и не объявляйте «arial, helvetica» в каком-либо порядке, вместо этого обращайтесь прямо к sans-serif.Таким образом, наиболее подходящий sans-serif используется на каждой платформе, такой как Arial для Windows и Helvetica для OS X и т. Д.

...