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

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

2 голосов
/ 19 октября 2011

У меня небольшая проблема с сайтом, над которым я работаю. Я использую службы шрифтов 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 для элементов, используя веб-шрифты. Если потребуется дополнительная информация, я предоставлю ее, где это возможно.

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

Ответы [ 5 ]

0 голосов
/ 07 октября 2014

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

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

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

0 голосов
/ 03 октября 2014

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

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

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

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

При развертывании на нашем промежуточном сервере шрифты отображаются правильно в IE 7 и 8 .

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

0 голосов
/ 16 января 2013

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

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

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

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

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

0 голосов
/ 19 октября 2011

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

@ font-face {семейство шрифтов: 'OpenSansLight';src: url ('OpenSans-Light-webfont.eot');Формат src: url ('OpenSans-Light-webfont.eot? #iefix') ('embedded-opentype'), формат url ('OpenSans-Light-webfont.woff') ('woff'), URL ('OpenSans-Формат Light-webfont.ttf ') (' trueetype '), формат url (' OpenSans-Light-webfont.svg # OpenSansLight ') (' svg ');Вес шрифта: нормальный;font-style: normal;

}

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

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

...