Мерцание шрифтов @font-face

  • 11.05.2016

Сегодня веб-технология позволяет дизайнеру и верстальщику внедрять разнообразные шрифты в сайт. И это здорово, так как можно сосредоточиться на типографике и придать сайту изюминку. Однако использование @font-face для шрифтов имеет свой небольшой недостаток, особенно он заметен в хромиусподобных браузерах — это мерцание шрифта.

Дело в том, что пока грузится шрифт текст отрисовывается запасным системным, например Arial, и после этого заменяется на необходимый нам из @font-face.

В Firefox мерцание незаметно, но в Chrome и хромиусподобных браузерах, будь то Opera, Yandex или Vivaldi этот момент очень заметен, особенно это видно в мобильных браузерах.

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

На Github есть интересная разработка localFont и одноименный сайт на ее базе https://jaicab.com/localFont/. Воспользовавшись этим инструментом мы превращаем наш шрифт в base64-код, который храниться непосредственно в файле CSS, сохраняемый в папку шаблона Joomla fonts.

Дабы ускорить внедрение этой технологии достаточно между тегами <head> вставить следующий код и прописать путь к файлу font.css.

<?php
$fontface = '/templates/MY_TEMPLATE/fonts/font.css';
?>
<script type="text/javascript">!function(){"use strict";function e(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)}function t(e){return window.localStorage&&localStorage.font_css_cache&&localStorage.font_css_cache_file===e}function n(){if(window.localStorage&&window.XMLHttpRequest)if(t(o))c(localStorage.font_css_cache);else{var n=new XMLHttpRequest;n.open("GET",o,!0),e(n,"load",function(){4===n.readyState&&(c(n.responseText),localStorage.font_css_cache=n.responseText,localStorage.font_css_cache_file=o)}),n.send()}else{var a=document.createElement("link");a.href=o,a.rel="stylesheet",a.type="text/css",document.getElementsByTagName("head")[0].appendChild(a),document.cookie="font_css_cache"}}function c(e){var t=document.createElement("style");t.innerHTML=e,document.getElementsByTagName("head")[0].appendChild(t)}var o="<?php echo $fontface; ?>";window.localStorage&&localStorage.font_css_cache||document.cookie.indexOf("font_css_cache")>-1?n():e(window,"load",n)}();</script><noscript><link rel="stylesheet" href="/<?php echo $fontface; ?>"></noscript>

Следует учесть, что в наш файл необходимо добавить все шрифты, которые вы используете в проекте.

Если же используете иконочные шрифты на подобии Font Awesome, то их так же добавляем.

Не пугайтесь, что файл font.css разрастается до 100-200 кб, так как он будет загружен лишь один раз и помещен в localStorage (локальное хранилище).

Для каждого шрифта @font-face я добавляю один параметр в своих проектах — это свойство font-display: swap; которое контролирует задержку. Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят. Свойство swap устанавливает период блокировки в 0 секунд и бесконечный период замены. А это означает, что браузер сразу отрисовывает текст безопасным шрифтом.

Так же следует знать, что кодирование шрифтов в таблицу стилей не поддерживается некоторыми старыми браузерами, поэтому мы можем применить старый прием:

@font-face {
    font-family: 'MyFont';
    src: url('/templates/MY_TEMPLATE/fonts/font.eot');
    src: url('/templates/MY_TEMPLATE/fonts/font.eot?#iefix') format('embedded-opentype'),
         url(data:application/font-woff;charset=utf-8;base64, [тут закодированный код шрифта] ) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Я добавил поддержку для IE с помощью шрифта font.eot и для старых версий браузеров, которые не понимают шрифт woff, например Opera.

В файл font.css также можно добавить в закодированном виде шрифты woff2 и ttf.

Многие наверняка спросят, а что если у пользователя отключена поддержка javascript? А для таких случаев в нашем скрипте в самом конце у нас добавлен код, который будет отрабатываться при выключенных скриптах:

<noscript><link rel="stylesheet" href="/<?php echo $fontface; ?>"></noscript>

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

Приятной вам разработки

Это интересно:

Денис Носов
Украина , Киев

Добавить комментарий

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Скачать Joomla! 3 Документация Joomla! CMS Свернуть

Шаблоны Joomla

Новости портала

Новое в блогах

Видео