Недавний метод, который, кажется, набирает популярность в последнее время, заключается в использовании метода, называемого поднабором, для уменьшения размера веб-шрифтов, кодирования их в base64 и хранения в локальном хранилище. Веб-шрифты, если их не использовать осторожно, могут сильно снизить производительность и заблокировать доступ к контенту вашего сайта.
Этот метод позволит вам уменьшить размер файлов шрифтов и асинхронно хранить их в локальном хранилище, показывая резервный системный шрифт во время загрузки ваших шрифтов. Это, наряду с некоторыми функциями, присущими локальному хранилищу, позволяет постоянно кэшировать ваши шрифты. Это означает, что они будут оставаться на компьютере клиента, сохраняться в течение сеансов и даже при перезапуске устройства.
Подмножество ваших шрифтов
Поднабор шрифтов — одна из самых важных вещей, которую вы можете сделать, чтобы улучшить производительность веб-шрифтов. Поднабор — это не что иное, как удаление неиспользуемых символов из файлов шрифтов. Неиспользуемые символы — это, как правило, символы из языков, которые вы не используете, или специальные символы, которые могут не понадобиться вашему веб-сайту или приложению, но часто включаются в файлы шрифтов. Поднастроив, вы можете уменьшить размер файла до 50%.
Вы можете использовать веб-генератор шрифтов Font Squirrel для подмножества и base64-кодирования ваших шрифтов в один конечный файл (не забудьте выбрать экспертную опцию для доступа к пользовательским подмножествам и выберите «Base64-кодировать» в разделе «CSS» формы).
Когда вы закончите, вы получите в одном файле таблицы стилей все ваши веб-шрифты, сжатые и готовые для последующего использования с одним запросом.
Выбор запасного шрифта
Чтобы пользователи не ждали, пока браузер попытается загрузить файл шрифта, рекомендуется показывать пользователю запасной системный шрифт. Это обеспечивает немедленный доступ к контенту (это то, к чему они приходят в конце концов).
Синхронная загрузка шрифта оставит текст пустым, пока браузер ожидает файл шрифта, и пользователь не сможет прочитать содержимое в ожидании завершения загрузки файла.
При асинхронной загрузке и хорошем выборе резервного шрифта пользователь сразу увидит текст, отображаемый в резервном шрифте, и шрифт переключится на выбранный вами веб-шрифт при загрузке файла.
Ваш резервный шрифт может быть стилизован, чтобы сделать этот переход более мягким, уменьшая переформатирование контента. Поскольку пользователь имеет доступ к вашему контенту без промедления, это является немедленным улучшением воспринимаемой производительности вашего сайта или приложения.
Чтобы узнать системные шрифты, доступные для разных ОС, вы можете проверить следующие источники:
- CSS Font Stack — полная коллекция веб-безопасных стеков шрифтов CSS для Mac и Windows.
- Шрифты iOS — перечисляет каждый шрифт для каждой версии iOS.
На Android сложнее сказать, какие системные шрифты используются из-за количества вилок и разных брендов, которые его используют. Однако наиболее распространенными шрифтами на Android являются: Droid Serif, Droid Sans, Droid Mono и Roboto.
Использование локального хранилища для сохранения веб-шрифтов
Сначала давайте добавим класс в узел <html> Используя JavaScript, это позже будет заменено классом, который имеет стили загруженного шрифта. Мы также сохраним путь, указывающий на файл шрифта, в переменную для последующего повторного использования.
document.documentElement.className = 'fallback';
var css_href = '../path/fonts.css';
Затем нам нужно проверить поддержку локального хранилища, пытаясь установить и поместить элемент в локальное хранилище. Некоторые браузеры не могут хранить что-либо в приватном режиме, но window.localStorage Нам нужен этот дополнительный запрос, чтобы убедиться, что наш скрипт будет работать правильно:
var localStorageSupported = function() {
try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
return true;
} catch(e) {
return false;
}
}
Если браузер localStorageSupportedstyleinjectRawStyle()injectFontsStylesheet() Если браузер не проходит тест, мы вызываем onLoadif (localStorageSupported() && localStorage.webFonts) {
injectRawStyle(localStorage.webFonts);
} else {
window.onload = function() {
injectFontsStylesheet();
}
}
injectFontsStylesheet()
Функция xhrinjectRawStylefunction injectFontsStylesheet() {
var xhr = new XMLHttpRequest();
xhr.open('GET', css_href, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
injectRawStyle(xhr.responseText);
localStorage.webFonts = xhr.responseText;
}
xhr.send();
}
}
style
Это функция, которая создает тег headtext Также на этом этапе мы заменяем резервный класс классом шрифтов, который имеет стили веб-шрифтов:
function injectRawStyle(text) {
var style = document.createElement('style');
style.innerHTML = text;
document.getElementsByTagName('head')[0].appendChild(style);
document.documentElement.className = 'webFont';
}
Теперь нам нужны реальные стили для отступления и веб-шрифт. Вы можете проверить эти стили, обновив свой браузер и наблюдая за перекомпоновкой контента. Цель состоит в том, чтобы максимально приблизить стили резервных шрифтов к реальным стилям, чтобы восприятие изменений стало практически незаметным.
.fallback {
font-family: Verdana, sans-serif;
line-height: 1.58em;
letter-spacing: 0px;
font-size: 9px;
}
.webFont {
font-family: 'Proxima-Nova', sans-serif;
line-height: 1.3em;
letter-spacing: 2px;
font-size: 13px;
}
Демо и подведение итогов
Если вы хотите взглянуть на код, вы можете просмотреть панель JavaScript в CodePen ниже.
Обратите внимание, что демонстрационная версия использует внешний CodePen в качестве исходного CSS, как описано в блоге CodePen .
Благодаря этому решению вы теперь можете асинхронно хранить свои шрифты в локальном хранилище, обеспечивая при этом хороший и надежный резервный шрифт.
Вы можете продолжать экспериментировать с этой техникой, пытаясь улучшить внешний вид резервного шрифта, чтобы он соответствовал выбранному вами веб-шрифту, или вы можете попытаться повторно использовать этот сценарий для других ресурсов, таких как файлы CSS или JavaScript.