Вспышка неустановленного контента в IE с @ font-face - PullRequest
Новая
       16

Вспышка неустановленного контента в IE с @ font-face

7 голосов
/ 29 января 2012

Я работаю над сайтом, который использует шрифт Open Sans для основного текста с файлами шрифтов EOT, SVG, WOFF и TTF и таблицей стилей, созданной Font Squirrel.Я включил свои шрифты CSS сначала в заголовок моей страницы.Но когда я просматриваю сайт в IE7, IE8 и даже в IE9, я все сразу вижу в Times Roman, прежде чем Open Sans запускается. В других браузерах этого не происходит.Я мог остановить это?Вот CSS-шрифт Font Squirrel, который я использую для этого шрифта: 

 @font-face {
    font-family: 'OpenSansRegular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ответы [ 2 ]

1 голос
/ 08 сентября 2012

Плагин jQuery для скрытия FOUC @font-face можно найти здесь: Как узнать, был ли уже загружен шрифт (@ font-face)? Удален блок кода из этой темы, как у меняобновлял его там.

1 голос
/ 29 января 2012

То, что вы видите во время загрузки пользовательского шрифта, не определено в приведенном выше коде. Это определено в ваших других font-family инструкциях в вашем коде CSS.

Добавить другие шрифты после значения OpenSansRegular, разделенные запятыми. Справа налево:

  • справа, семейство вашего шрифта. serif, sans-serif, monospace или cursive ( yay Comic Sans! ). Здесь OpenSansSth это ... sans-serif.
    В вашем браузере по умолчанию для этих семейств используется шрифт Arial, Verdana или какой-либо другой шрифт в Linux. Это выбор пользователя, когда вы не выбираете его. Семейство по умолчанию - serif, а шрифт по умолчанию в Windows - «Times New Roman». Вот почему вы видите Times New Roman как FOUC в IE.
  • затем шрифт websafe, максимально приближенный к вашему шрифту. Здесь это будет шрифт без засечек, как Verdana или Arial. Возможно, sans-serif и Verdana - это одно и то же, но вы никогда не уверены (особенно для пользователей Linux), поэтому добавьте оба
  • Между вашим пользовательским шрифтом и веб-шрифтом вы можете добавить шрифты, которые могут быть установлены во многих ОС, но не являются веб-безопасными, как те, которые установлены в MS Office, Adobe Reader, OS X, Adobe Creative Suite и т. Д. Вы найдете их на 10–90% компьютеров ваших посетителей, но не на 100%. Не все устанавливают Creative Suite (только веб-профессионалы и другие дизайнеры) и MS Office (я использую LibreOffice), и в XP, Vista и 7
  • наконец, крайним левым значением будет пользовательское имя, которое вы дали своему пользовательскому шрифту. OpenSansRegular на вашем сайте

Ex: 

         nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif;
         }

Таблицы совместимости с процентами (возможно, немного устаревшие) http://www.codestyle.org/css/font-family/
Не используйте 10 значений, от 3 до 6 может быть достаточно;) В 2012 году @ font-face может вызвать проблемы с рендерингом в зависимости от браузера и ОС (псевдонимы), но он очень хорошо поддерживается, поэтому вы можете сократить свои семейства шрифтов.

...