Мерцание шрифта при динамической загрузке новых CSS-файлов - PullRequest
Новая
       4

Мерцание шрифта при динамической загрузке новых CSS-файлов

15 голосов
/ 22 ноября 2011

Я использую Google Webfont Loader, чтобы загрузить мои веб-шрифты с обратным вызовом, и он работает нормально.

Хотя, когда есть пара компонентов: кнопка Google +1, виджет поиска Twitter и Add ThisКнопка загружена, они добавляют новую таблицу стилей в DOM и заставляют браузер снова визуализировать сайт.Это приводит к тому, что font-face исчезает, а затем отображается для каждой новой таблицы стилей, добавленной в dom.

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

Советы Энди о том, как заставить шрифтовое лицо не перерисовывать или как блокировать динамически загружаемый CSS из сценариев встраивания в Google, Twitter и FBs?

Обновление: Демо здесь http://kristoferforsell.com/dev/fontexample/

Ответы [ 5 ]

10 голосов
/ 20 декабря 2011

В настоящее время это проблема, связанная с браузерами и свойством @ font-face. Мигание происходит, когда шрифт загружен, и страница обновляется, чтобы отобразить шрифт. Если вы хотите полностью удалить «мерцание», единственный надежный способ - включить шрифт в качестве URI данных в таблицу стилей. Конечно, использование стандартных «безопасных» шрифтов также уберет мигание.

URI данных позволяют вам фактически вставить код для шрифта в таблицу стилей, чтобы при обновлении страницы не было мерцания, чтобы показать желаемый шрифт. Использование URI данных, очевидно, увеличит размер файла (КБ) любой таблицы стилей.

Онлайн-конвертер для получения кода base64 можно найти здесь

Использование @ font-face будет примерно таким ... 

 @font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[   the base64 code here   ]");
}
8 голосов
/ 15 декабря 2011

Не уверен, что это решит вашу проблему, но вы можете использовать css, чтобы установить видимость скрытых элементов до тех пор, пока не будет загружен шрифт font .Google API предоставляет классы wf-loading и wf-active, которые добавляются в тело для решения этой проблемы.

Я всегда настраиваю отдельную таблицу стилей только для правила @ font-face, и в рамках этого вставляемследующие правила, где replace - это класс заменяемого элемента, для вас это будет просто тег p.

.wf-loading .replace { visibility: hidden;}

Ваш будет

.wf-loading p { visibility: hidden;}

Затем, как только веб-шрифт загружен, JS помещает в тело класс wf-active, и появляется ваш текст.Дайте мне знать, как это происходит, и если у вас есть какие-либо проблемы, просто напишите мне.Возможно, стоит поискать «flash of unstyled content» или «flash of unstyled text», поскольку это хорошо известная и хорошо документированная ошибка.

7 голосов
/ 24 ноября 2011

Я могу предложить простой и грязный трюк, который я использовал для решения подобных проблем.Если вы реализуете это, со стороны пользователя эффект будет состоять в том, что вся страница будет загружаться сразу (с правильными веб-шрифтами), но с задержкой.После загрузки ничего не будет мерцать или меняться.Оберните все содержимое страницы в div и установите видимость скрытой.Затем используйте js, чтобы включить видимость после загрузки всей страницы (таблиц стилей и всего).Вот код: 

<head>
<script>
function show()
{document.getElementById('wrapper').style.visibility='visible';}
</script>
</head>
<body onload="show()">
<div id="wrapper">
...your entire page contents...
</div>
</body>

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

РЕДАКТИРОВАТЬ: Я добавил веб-шрифты Google на сайт, на который я ссылался.Все еще работает отлично.Отсутствие мерцания шрифта.

1 голос
/ 20 декабря 2011

Это выстрел в темноте, поскольку я не проверял его: Не могли бы вы создать еще одну HTML-страницу только с этими кнопками социальных сетей, а затем загрузить ее в iframe? Затем установите src в iframe только после полной загрузки документа, чтобы он ничего не удерживал.

В html: 

<iframe id="socialMedia"></iframe>

В сценарии: 

$(document).ready(function() {
   $('#socialMedia').src = "http://mysite.com/mysocialmediastrip.html";
});

Где mysocialmediastrip.html содержит все кнопки социальных сетей. Установка src приведет к тому, что iframe перезагрузит и извлечет этот контент, но IIRC, остальная часть страницы останется одна - все рендеринг кнопок будет выполняться в mysocialmediastrip.html, а не на вашей главной странице.

0 голосов
/ 03 апреля 2013

Я полностью понимаю, что вы говорите о процессе задержки, ожидая, пока загрузится окно, прежде чем вы действительно покажете свои товары.Абхранил предоставил хорошее решение, но вы можете продолжить его решение.Вы можете использовать ajax jQuery для загрузки содержимого вашей конкретной страницы, которое использует специальный тип шрифта.Зачем?потому что в ajax есть специальная функция с именем beforeSend () .В функции beforeSend () вы можете загрузить очень классную подарочную анимацию, которая будет отображаться на вашем экране, прежде чем ваш основной контент будет готов для просмотра.

Используйте этот момент, чтобы проявить творческий подход к аудитории перед главным событием!

...