Одна из причин заключается в том, что в настоящее время веб-дизайнерам нравится использовать веб-шрифты (обычно в формате WOFF ), например, через веб-шрифты Google.
Ранее единственными шрифтами, которые можно было отображать на сайте, были те, которые пользователь установил локально. Так как, например, пользователи Mac и Windows не обязательно имели одинаковые шрифты, дизайнеры инстинктивно всегда определяли правила как
font-family: Arial, Helvetica, sans-serif;
где, если первый шрифт не найден в системе, браузер будет искать второй и, наконец, запасной шрифт «без засечек».
Теперь можно указать URL-адрес шрифта в качестве правила CSS, чтобы браузер мог загрузить шрифт следующим образом:
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
а затем загрузить шрифт для определенного элемента, например:
font-family: 'Droid Serif',sans-serif;
Это очень популярно, когда можно использовать пользовательские шрифты, но это также приводит к проблеме, заключающейся в том, что текст не отображается, пока ресурс не будет загружен браузером, который включает время загрузки, время загрузки шрифта и время рендеринга. Я ожидаю, что это тот артефакт, который вы испытываете.
В качестве примера: одна из моих национальных газет, Dagens Nyheter, использует веб-шрифты для заголовков, но не для лидов, поэтому, когда этот сайт загружается, я обычно вижу сначала, а через полсекунды все пустые места выше заполняются с заголовками (это верно, по крайней мере, для Chrome и Opera. Не пробовал других).
(Кроме того, в наши дни дизайнеры распространяют JavaScript абсолютно везде, поэтому, возможно, кто-то пытается сделать что-то умное с текстом, поэтому он задерживается. Это было бы очень специфично для сайта: общая тенденция к задержке текста в это время - проблема веб-шрифтов, описанная выше, я полагаю.)
прибавление
Этот ответ стал очень голосуемым, хотя я не вдавался в подробности, или, возможно, из- за этого. В ветке вопросов было много комментариев, поэтому я постараюсь немного их расширить (многие комментарии, по-видимому, исчезли вскоре после того, как тема была защищена - какой-то модератор, вероятно, удалил их вручную). Кроме того, прочитайте другие ответы в этой теме, поскольку они все расширяются по-своему.
Этот феномен, по-видимому, известен как "флеш нестандартного содержимого" в целом и "флеш нестандартного текста" в частности. Поиск "FOUC" и "FOUT" дает больше информации.
Я могу порекомендовать пост веб-дизайнера Пола Ирриша на FOUT в связи с веб-шрифтами.
Что можно отметить, так это то, что разные браузеры обрабатывают это по-разному. Я писал выше, что я тестировал Opera и Chrome, которые оба вели себя одинаково. Все основанные на WebKit (Chrome, Safari и т.д.) Предпочитают избегать FOUT, не отображая текст веб-шрифта с резервным шрифтом в течение периода загрузки веб-шрифтов. Даже если веб-шрифт кэшируется, будет задержка рендеринга. В этой ветке вопросов есть много комментариев, говорящих об обратном и о том, что неправильно кэшированные шрифты ведут себя так, но, например, по приведенной выше ссылке:
В каких случаях вы получите FOUT
- Будет: загрузка и отображение удаленного ttf/otf/woff
- Will: Отображение кэшированного ttf/otf/woff
- Will: Загрузка и отображение данных-uri ttf/otf/woff
- Будет: отображение кэшированных данных-uri ttf/otf/woff
- Не будет: отображение шрифта, который уже установлен и назван в вашем традиционном наборе шрифтов
- Не будет: отображение шрифта, который установлен и назван с использованием local()
Поскольку Chrome ждет, пока риск FOUT не исчезнет, перед рендерингом это дает задержку. В какой степени эффект виден (особенно при загрузке из кэша), по-видимому, зависит, помимо прочего, от объема текста, который необходимо отобразить, и, возможно, от других факторов, но кэширование не полностью удаляет эффект.
У ирландцев также есть некоторые обновления, касающиеся поведения браузера, по состоянию на 2011–04–14 в нижней части поста:
- Firefox (по состоянию на FFb11 и FF4 Final) больше не имеет FOUT! Wooohoo! http://bugzil.la/499292 В основном текст невидим в течение 3 секунд, а затем он возвращает запасной шрифт. Веб-шрифт, вероятно, будет загружен в течение этих трех секунд, хотя ... надеюсь ...
- IE9 поддерживает WOFF, TTF и OTF (хотя для этого требуется набор битов для встраивания - в основном спорный, если вы используете WOFF). ТЕМ НЕ МЕНИЕ!!! IE9 имеет FOUT. :(
- У Webkit есть патч, ожидающий приземления, чтобы показать запасной текст через 0,5 секунды. То же поведение, что и FF, но 0,5 с вместо 3 с.
- Дополнение : Blink также зарегистрировала ошибку для этого, но кажется, что окончательное согласие не было достигнуто относительно того, что с этим делать - в настоящее время та же реализация, что и в WebKit.
Если бы этот вопрос был предназначен для дизайнеров, можно было бы попытаться избежать подобных проблем, таких как webfontloader
, но это был бы другой вопрос. Ссылка Пола ирландского языка содержит более подробные сведения по этому вопросу.