Одна из причин заключается в том, что в настоящее время веб-дизайнерам нравится использовать веб-шрифты (обычно в формате 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, но это был бы другой вопрос. Ссылка Пола ирландского языка содержит более подробные сведения по этому вопросу.
