Шрифты на сайте (отличные от стандартных) - это «серебряная пуля» дизайнеров и огромная головная боль разработчиков. Шрифты легко позволяют сделать сайт уникальным, запоминающимся, но платой за эту является существенное ухудшение скорости загрузки сайта.
Как правильно подключить собственные шрифты и не навредить скорости сайта? Разбираем конкретные шаги, которые позволят это сделать.
1. Правильное подключение
Собственные шрифты сайта, скорее всего, отсутствуют в браузере пользователя. Поэтому необходимо указать дополнительные к загрузке файлы, в которых будет содержаться техническая информация о начертании шрифтов (символы - глифы, особенности совместного начертания символов и строк и другие данные). Как это часто бывает, для каждого браузера нужен свой файл - Google Chrome понимает формат woff и woff2 (наиболее продвинутые), старый Android понимает только TTF, а IE - eot.
Дополнительно можно учесть, что в редких случаях шрифт может быть уже установлен на устройство пользователя: в этом случае можно использовать директиву local. Развернутая CSS инструкция, подключающая соответствующий шрифт на сайте, будет выглядеть примерно так (используем различные форматы для «попадания» в разные браузеры):
@font-face {
font-family: "Awesome Font";
font-style: normal;
font-weight: 400;
src: local("Awesome Font"),
url("/fonts/awesome.woff2") format("woff2"),
url("/fonts/awesome.woff") format("woff"),
url("/fonts/awesome.ttf") format("ttf"),
url("/fonts/awesome.eot") format("eot");
}
В этом случае все файлы шрифтов размещаются на хостинге. Для поддержки всех браузеров обычно используется набор файлов шрифтов для каждого начертания (гарнитуры). Его можно создать, например, через Font Squirrel : сервис автоматически предоставит CSS-код и набор файлов для размещения на сервере.
В качестве альтернативного варианта можно использовать сервис Google Fonts : вы вставляете вызов скрипта сервиса на сайт, а в зависимости от используемого браузера сервис уже отдает соответствующий CSS-код и файлы шрифта (уже с разбиением по языкам), поддерживая более 30 разных комбинаций.
2. Обратная совместимость шрифтов
Для максимального ускорения отображения текста вашего сайта на любом пользовательском устройстве вы должны сообщить браузеру, какой запасное семейство шрифтов можно использовать, если ваш собственный шрифт недоступен (не загрузился еще или загружается неподдерживаемый формат). Для этого в директиве font-face после названия вашего шрифта нужно указать наиболее подходящую системную альтернативу с обязательным окончанием serif (шрифт с засечками), sans-serif (без засечек) или monospace (равной ширины). Хотя обратная совместимость приводит к FOUT, но эта альтернативна лучше, чем невидимый на сайте текст (FOIT).
Но основную проблему с загрузкой собственных шрифтов это не решает: шрифты большие. Иногда слишком большие. И почти всегда они требуются, чтобы отобразить текст на странице (т.е. загрузка шрифта идет на стадии «белого экрана», максимально раздражая пользователей). Как это вылечить?
3. Инвентаризация шрифтов
Третий, и наиболее важный шаг в оптимизации – оставить только нужные шрифты. Инвентаризация шрифтов (удаление неиспользуемых на сайте или максимальная обрезка используемых и фактически используемых символов). Также нужно выбрать не только шрифты, но и их варианты (обычный, курсив, полужирный).
Оптимизация размера шрифтов состоит из трех базовых вещей: обеспечить обратную совместимость, включить сжатие и устранить неиспользуемые глифы. Перед проведением оптимизации конкретных файлов нужно пересмотреть набор используемых нестандартных шрифтов и оставить только те, которые реально нужны для сайта.
4. Использование Google Fonts API
В дальнейшей оптимизации шрифтом большим подспорьем будет сервис Google Fonts API, который позволяет получить уже готовый код для интеграции шрифтов на сайте с учетом основных требований к скорости их загрузки.
Google Fonts API позволяет загрузить только нужные варианты щрифта, а также загружает шрифты по наборам символов (позволяет браузерам не загружать полностью шрифт, если не все глифы требуются для отображения страницы). Среди дополнительных возможностей стоит отметить и параметр text={letters}, который обрезает символы в загружаемом шрифте строго до заданных (если шрифт используется только для логотипа, это может быть очень ценно).
5. Уменьшение размера шрифтов
Если вы используете статическое сжатие, то достаточно подготовить архивы с файлами шрифтов и разместить их рядом с файлами шрифтов. При динамическом сжатии проверьте, что все основные форматы шрифтов - EOT, TTF, OTF, SVG, WOFF и WOFF2 - отдаются с хостинга сжатыми (проверка сжатия ). Если это не так, то нужно добавить требуемые расширения или типы файлов в правила сжатия. Gzip (или zopfli ) сжатие позволяет сократить размер шрифтов на 15-50%.
6. Удаление глифов
Для отображения текста на сайте обычно требуются далеко не все символы, включенные в шрифт по умолчанию. Часть из них относится к другому языку (например, к китайскому), часть - к специальным символам, которые вы не используете. Существует большое количество инструментов для удаления из шрифтов неиспользуемых глифов и утилиты по Windows / Mac. Наиболее популярные - это сервис Font Squirrel (в режиме Advanced), а также и FontPrep . Также Google Fonts позволяет загружать только используемые наборы символов. Этот метод оптимизации позволяет сократить результирующий файл еще на 10-50%.
В совокупности, все указанные методы оптимизации размера подключаемых шрифтов позволяют существенно ускорить отображение сайта на всех устройствах, независимо от красоты используемых шрифтов и неплохо автоматизируются: например, в облаке Айри.рф сокращается размер поступающих с хостинга шрифтов на 20-80%.
7. Кэширование шрифтов в браузере
Есть несколько подходов, позволяющих применить некоторую «магию» к загрузке шрифтов, чтобы до минимума снизить негативные эффекты.
Первое – это жесткое кэширование файлов (для обычных пользователей) и base64-представления (в localStorage, для мобильных пользователей). Прием работает только для вернувшихся на сайт пользователей, но для них позволяет существенно сократить время загрузки (Детальная инструкция по использования localStorage).
8. Font Loading API
9. Предзагрузка шрифтов
И, наконец, предварительная загрузка шрифтов (если они используются не с первой страницы у пользователей: например, в личном кабинете). Для этого подойдет техника prefetch , которая уже очень хорошо поддерживается браузерами: http://caniuse.com/#feat=link-rel-prefetch .
За последний год число сайтов, использующих дополнительные шрифты, выросло вдвое - с 6 до 12%.
Слабым местом веб-шрифтов является производительность, однако ситуация постепенно меняется в лучшую сторону: появляются более совершенные методы сжатия, улучшается поддержка браузерами, unicode, отдельные наборы шрифтов и т.д.
Оптимизация
На первый взгляд использовать веб-шрифты очень просто - достаточно скачать необходимый набор и подключить его на странице. Но на деле все немного сложнее. Существует четыре разных формата:Но ни один из них не обеспечивает кроссбраузерность (проверить поддержку можно на сайте caniuse.com: woff , ttf , eot , svg), поэтому желательно использовать несколько форматов одновременно. И тут мы сталкиваемся с проблемой производительности: файл шрифта сам по себе достаточно массивен, к примеру шрифт Arial, поддерживающий все языки, весит 22 мегабайта! Конечно на обычных страницах нет смысла подключать сразу все символы набора, поэтому необходим инструмент, позволяющий использовать только часть шрифта (например только кириллицу).
К примеру шрифт Open Sans - один из самых популярных Google Web Fonts, включающий все языки, весит 217 килобайт, но размер можно уменьшить, если использовать только один набор - latin. тогда размер уменьшится до 36 килобайт:
Вот, как можно подключить только часть шрифта (latin):
Размер файла может быть снижен, если удалить дополнительные метаданные Font-хинтинга для браузеров, где эта технология не поддерживается. Font-hinting - часть процесса растеризации шрифта, используется для улучшения отображения текста на странице.
Улучшенные алгоритмы сжатия позволяют сократить размер файла на 15%, а ожидаемый в скором будущем формат WOFF 2.0 позволить сжимать на 30% лучше.
Для подключения только части символов («H», «e», «l» и «o») можно использовать следующий код:
Использование
Все шрифты из Google Web Fonts являются открытыми , что позволяет успешно использовать межсайтовое кэширование. Например упомянутый выше Open Sans используется на более чем миллионе сайтов, а это значит, что для увеличения производительности можно кэшировать шрифт в браузере пользователя при посещении предыдущих сайтов с данным шрифтом.Вот как это работает:
CSS-стили, используемые в сервисе Google Web Fonts являются динамическими: они автоматически определяют подходящий формат для конкретного пользователя и его браузера. CSS-стили кэшируются на 24 часа. Внутри стиля находится ссылка на сам файл шрифта. Кэш самого шрифта хранится целый год! Учитывая популярность веб-шрифтов, очевидно, что в кэше уже есть копия того же Open Sans.
Существует также полезный инструмент - Javascript Font Loader от Google, позволяющий отображать процесс загрузки веб-шрифтов. Использовать достаточно просто:
H1 { visibility: hidden; } .wf-active h1 { visibility: visible; }
А javasript обрабатывает действия:
WebFontConfig = { google: { families: [ "Tangerine", "Cantarell" ] // Google example }, typekit: { id: "myKitId" // Typekit example }, loading: function() { // JavaScript to execute when fonts start loading }, active: function() { // JavaScript to execute when fonts become active }, inactive: function() { // JavaScript to execute when fonts become inactive (time out) } };
С ситуацией, когда тормозит компьютер, знаком каждый пользователь. В большинстве случаев причина медленной работы заключается в нагрузке на CPU устройства одним из процессов. Сегодня мы хотим рассказать вам, почему presentationfontcache.exe нагружает компьютер, и как справиться с этой проблемой.
Причина проблемы и её решение
Исполняемый файл presentationfontcache.exe является системным процессом, который принадлежит к Windows Presentation Foundation (WPF), компоненту Microsoft .NET Framework , и требуется для корректной работы приложений, использующих данную технологию. Проблемы с его ненормальной активностью связаны со сбоем в Майкрософт.НЕТ Фреймворк: вероятно, отсутствует часть данных, необходимых для корректной работы приложения. Переустановка компонента ничего не даст, поскольку presentationfontcache.exe – часть системы, а не устанавливаемый пользователем элемент. Частично решить проблему можно отключением службы, которая запускает процесс. Это делается так:
В случае если проблема всё ещё наблюдается, дополнительно потребуется перейти в папку, расположенную по адресу:
C:\Windows\ServiceProfiles\LocalService\AppData\Local\
В этом каталоге находятся файлы FontCache4.0.0.0.dat и FontCache3.0.0.0.dat , которые нужно удалить, а после перезагрузить компьютер. Эти действия избавят вас от проблем с указанным процессом.
Как видим, решить проблему с presentationfontcache.exe довольно просто. Обратной стороной этого решения будут сбои в работе программ, которые используют платформу WPF.
Всем hello. Будем разбираться с тем что это за процесс такой PresentationFontCache.exe, который видимо может еще и проц грузить. Начал искать в интернете инфу, узнаю что процесс PresentationFontCache.exe идет от службы Windows Presentation Foundation Font Cache. Эта служба типа оптимизирует работу программ тем, что кэширует наиболее используемые данные о шрифтах. И типа если эту службу отключить, то программы могут работать немного медленнее.
Русское название Служба кэша шрифтов Windows (FontCache). Короче есть какие-то программы WPF (Windows Presentation Foundation), вот для них эта служба и нужна. Но как понять где программа WPF, а где нет, я не знаю. Но еще пишется, что если у вас нет программ WPF, то службу можно отключить. Короче немного дурдом.
Я писал, что процесс PresentationFontCache.exe может грузить ПК. Я по этому вопросу отправился в интернет. Удивительно, но ответ дала сама компания Microsoft. Итак, первое что нужно сделать, это остановить службу. Не отключать ее, а именно остановить. Зажимаем кнопки Win + R, вставляем в окно Выполнить эту команду:
Откроется окно со списком служб, находим здесь Служба кэша шрифтов Windows, вот она:
Нажимаем по ней два раза, появится такое окошко, здесь нажимаете кнопку Остановить:
Служба должна остановиться без проблем:
Потом делаете вот что, вам нужно перейти в эту папку:
C:\Windows\ServiceProfiles\LocalService\AppData\Local
Вот что у меня в этой папке:
В интернете я прочитал, что нужно удалить файлы FontCache4.0.0.0.dat и FontCache3.0.0.0.dat, но у меня их нет. Думаю у вас их тоже спокойно может не быть. У меня тут три файла, в имени которых есть слово FontCache, это вот эти:
Кстати в Windows 10 все эти файлы вроде бы лежат в папке FontCache, ну это просто вам на заметку…
Так вот, эти файлы я удалю, надеюсь глюков не будет. Нажал правой кнопкой по ним, выбрал пункт Удалить:
Потом типа подтвердил свои действия:
Но у меня выскочила такая ошибка:
Я тут нажал кнопку Отмена. А знаете почему? Потому что такой прикол, удалить файлы нельзя. А вот вырезать можно. Поэтому я нажал снова правой кнопкой по ним, выбрал пункт Вырезать:
Потом я их вставил на рабочий стол. Все получилось, в папке теперь этих файлов нет:
Потом я обратно службу Служба кэша шрифтов Windows запустил и уже появилось два новых файла (спустя время появился еще один):
Так что вроде бы я то удалил. Ну то есть вырезал, хотя по сути это как бэ одно и тоже. Кстати, помните я писал, что файлы я вырезал и вставил на рабочий стол? Так вот оттуда я их тоже не могу удалить. Но это уже не так важно, я файлы все равно удалил, но при помощи утилиты Unlocker, выделил все файлы, нажал правой кнопкой, выбрал пункт Unlocker, потом в меню выбрал Удалить и нажал кнопку ОК:
Ну и все окей, обьект удален:
Вот так ребята. Честно говоря не знаю поможет вам этот способ или нет, но надеюсь поможет, в любом случае он помог нескольким. У себя процесс PresentationFontCache.exe я видел, но он не грузил ПК никогда. Если что у меня Windows 7 =)
Еще узнал что Windows Presentation Foundation (WPF) это какая-то графическая презентационная подсистема, которая идет в составе.NET Framework 3.0, такие дела ребята.
Кстати, если вообще ничего не помогает, то можно попробовать службу Служба кэша шрифтов Windows отключить вообще. Все таки эта служба, это только кэш, а не что-то критически важное. Можно вспомнить как файловый кэш в Windows 7 много кушал оперативы и были тормоза, ну было такое, может не все знают….
Ребята, на этом все. Очень надеюсь что приведенный мной способ поможет вам, если у вас есть трабла с PresentationFontCache.exe. На этом все ребята, удачи вам!
