Веб-шрифты в Internet Explorer возвращаются после завершения загрузки страницы

У меня возникла небольшая проблема с сайтом, над которым я работаю. Я использую службы шрифтов с Fonts.com для обслуживания CSS и веб-шрифтов, которые я использую на сайте, и все работает хорошо, кроме как в Интернете. Страница отображается с правильными шрифтами, но когда загрузка завершена, IE возвращается к шрифту по умолчанию.

Вот пример CSS:

@font-face{
    font-family:"HelveticaNeueW02-55Roma";
    src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("eot");
}

@font-face{
    font-family:"HelveticaNeueW02-55Roma";
    src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac");
    src:url("/d/d5af76d8-a90b-4527-b3a3-182207cc3250.woff?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("woff"),url("/d/1d238354-d156-4dde-89ea-4770ef04b9f9.ttf?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("truetype"),url("/d/b68875cb-14a9-472e-8177-0247605124d7.svg?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac#b68875cb-14a9-472e-8177-0247605124d7") format("svg");
}

и типичные варианты использования:

body {
    font-family: "DIN Next W02 Cond";
    font-weight: normal;
    font-size: 14px;
    font-weight: normal;
}


p {
    font-family: "HelveticaNeueW02-55Roma";
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5;
}

широкий шрифт — это то, что отображается после завершения загрузки страницы, а узкий шрифт (правильный шрифт) отображается во время загрузки страницы.

Есть ли легкое решение? Fonts.com предоставляет веб-портал для указания шрифтов в CSS, который они обслуживают со своих серверов, поэтому я не могу легко это редактировать. Однако я могу редактировать свойство font-family для элементов, использующих веб-шрифты. Если потребуется дополнительная информация, я предоставлю ее по возможности.

Редактировать: это не вспышка нестилизованного содержимого, оно правильно отображается из того, что предположительно является кешем, затем (при повторной загрузке файла) отбрасывает пользовательский шрифт и заменяет это со шрифтом по умолчанию, когда страница загружается. Это противоположно тому, что я и другие ожидают, поэтому публикую здесь для исправления.


css internet-explorer webfonts
person Scott R    schedule 19.10.2011    source источник
comment
В консоли инструментов F12 вы видите какие-либо предупреждения? Есть ли репродукционный URL?   -  person EricLaw    schedule 20.10.2011

Ответы (5)


arrow_upward
0
arrow_downward

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

@font-face { семейство шрифтов: 'OpenSansLight'; источник: url('OpenSans-Light-webfont.eot'); src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Light-webfont.woff') format('woff'), url('OpenSans- Light-webfont.ttf') format('truetype'), url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg'); вес шрифта: нормальный; стиль шрифта: обычный;

}

это лучший способ получить кроссбраузерность @font-face. если вам нужны эти файлы, зайдите на fontsquirrel.com

загрузчик шрифтов используется шрифтами typekit и google для исправления прошивки; я не уверен, что вам придется настраивать его для своего кода, но вы можете найти его на github https://github.com/typekit/webfontloader

person albert    schedule 19.10.2011
comment
Проблема настолько странная, что ее трудно правильно сформулировать. Дело не в том, что я пытаюсь избежать FOUT, а в том, что шрифты загружаются немедленно (предположительно из кеша), а затем перестают использоваться вскоре после повторной загрузки файлов. Это противоположно отображению по умолчанию до тех пор, пока пользовательский стиль не будет готов: он отображает пользовательский стиль до загрузки страницы, затем отбрасывает пользовательский стиль и заменяет его текстом по умолчанию. - person Scott R; 19.10.2011
comment
Вы объявляете их в стиле, который я показал, или в том, который вы показали? покажи нам свой код, чувак. - person albert; 19.10.2011
comment
Я не могу легко изменить CSS, так как он предоставляется непосредственно fonts.com (я мог бы подделать его, но это затруднило бы его изменение позже). Я добавил пару типичных вариантов использования в исходный пост. Оба фрагмента кода взяты непосредственно из CSS, размещенного на странице. - person Scott R; 19.10.2011
comment
вы не можете изменить css, так как вы загружаете их стили/файлы через элемент ссылки? - person albert; 19.10.2011
comment
Да. <link href="http://fast.fonts.com/cssapi/215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac.css" rel="stylesheet"> — это скопированный/вставленный фрагмент, который они дают для помещения в элемент <head>. - person Scott R; 20.10.2011
comment
не знаю человек. это отстой... я думаю, вы платите? обратитесь к своим администраторам и посмотрите, почему они не используют синтаксис @font-squirrel? они должны быть в курсе - person albert; 20.10.2011
comment
У меня такая же проблема в IE7 + 8. И мы размещаем свои собственные шрифты. Веб-шрифт отображается правильно во время загрузки страницы, а затем возвращается к следующему в стеке шрифтов. Я дам вам знать, если выясню, в чем причина. - person Dan Tello; 06.04.2012

arrow_upward
0
arrow_downward

Так что для меня это была локальная проблема.

Когда мы развернули его на промежуточном сервере, шрифты правильно отображались в IE 7 и 8 .

До сих пор не знаю, почему они не появляются локально, но, по крайней мере, это работает в производстве.

person Dan Tello    schedule 06.04.2012

arrow_upward
0
arrow_downward

Мои шрифты правильно отображаются в IE8 локально. Также работает в хроме и ФФ.

Шрифты терпят неудачу в производстве. Я использую fontawesome для начальной загрузки твиттера.

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

Это определенно проблема «при загрузке» и «скорости загрузки» в «отношении к другому CSS». Перемещение ссылки CSS выше или ниже в коде имеет эффект, но без явного исправления.

Было бы неплохо, если бы я мог «восстановить» загруженные шрифты после завершения страницы.

person Warren    schedule 16.01.2013
comment
Если у вас есть вопрос, пожалуйста, задайте свой вопрос - person Hugo Dozois; 16.01.2013

arrow_upward
0
arrow_downward

В нашем проекте мы определили, что веб-шрифты возвращаются после загрузки страницы в Internet Explorer, когда у нас открыты инструменты разработчика. Нам по-прежнему приходится время от времени напоминать себе об этом, но именно поэтому вы можете наблюдать такое странное поведение локально, а не в рабочей среде.

Это определенно происходит не при каждой загрузке страницы, но чаще, когда мы вручную обновляем страницы. Мы не нашли документации по этому поведению, но испытали его на нескольких компьютерах при работе с IE 10 и особенно IE 11.

person Jamie Thomas    schedule 03.10.2014

arrow_upward
0
arrow_downward

У меня была такая же проблема со вспышкой стилизованного контента, и для меня причина была двоякой:

  1. У меня был установлен шрифт локально
  2. Я использовал неправильный URL для веб-шрифта

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

person Mikal Madsen    schedule 07.10.2014