Некоторые специальные шрифты часто используются при ежедневной разработке веб-страниц, такие как Siyuan Black Body, шрифт Pingfang и т. д., потому что эти шрифты не существуют в общей среде хоста и требуют прохождения css.@font-faceОпределите и загрузите соответствующий файл шрифта с сервера, и файл шрифта, как правило, относительно большой, и даже иногда шрифт больше, чем все другие ресурсы (js, css, изображения) вместе взятые, что влияет на производительность загрузки веб-страницы. Игра очень критично влияет, поэтому необходимо провести некоторую оптимизацию шрифта. В этой статье в основном обсуждаются общие методы оптимизации шрифтов с трех аспектов: формат шрифта, извлечение по требованию и унифицированный рендеринг.
Преобразование формата шрифта
Теперь это 1202, и все основные устройства в основном поддерживают формат шрифта woff2, поэтому нет необходимости добавлять на веб-сайт несколько шрифтов в разных форматах. В общем, рекомендуется ввести только woff2, который может не только сохранить лаконичность кода, но и уменьшить количество файлов, загружаемых на ваш сервер, почему бы и нет?
Однако многие студенты-искусствоведы предоставляют нам файлы шрифтов только в других форматах, таких как TTF или OTF.Как преобразовать их в woff2?
-
Шрифт TTF для WOFF2
Шрифт TTF поддерживается как Apple, так и Windows, поэтому его любят студенты, изучающие искусство. Преобразование TTF WOFF2 относительно просто, вы можете выбрать онлайн-преобразование, рекомендуемые веб-сайты:
Тем не менее, я лично считаю, что онлайн-преобразование требует много времени для ожидания загрузки, а иногда сгенерированные файлы пусты, поэтому я предпочитаю использовать библиотеку узлов.ttf2woff2конвертировать. Еженедельный объем загрузки этой библиотеки достигает 10w+, что показывает, что у многих людей возникнет необходимость конвертировать tff в woff2. Способ применения также очень прост:
cat font.ttf | ttf2woff2 > font.woff2
Поскольку команда cat используется для извлечения содержимого ttf, если вы используете Windows, вам нужно использовать git bash или wsl для запуска.
-
OTF в WOFF2
В дополнение к TTF студенты-искусствоведы часто предоставляют нам OTF — шрифт, совместно разработанный Microsoft и Adobe, поэтому он относительно популярен на платформе Windows. Итак, как преобразовать его в WOFF2? В настоящее время я не нашел ни одного онлайн-сайта или библиотеки узлов, которые можно было бы преобразовать за один шаг.Я искал несколько веб-сайтов онлайн-конверсии в Google, либо его невозможно загрузить после завершения преобразования, либо это пустой файл после преобразование и загрузка.В любом случае, это ненадежные вещи.
После некоторого метания я нашел хорошую библиотеку Pythonotf2ttf, который может стабильно конвертировать otf в ttf. Способ использования тоже относительно прост.Сначала установите python, а потом через pip установите otf2ttf и можете им пользоваться (pip похож на npm, который является менеджером пакетов для python), но в образце должна быть небольшая опечатка код в официальной документации:
otf2ttf MyFont.ttf
MyFont.ttf внутри должен быть MyFont.otf, потому что ввод должен быть типа OTF, а не TTF.
После использования python otf2ttf для создания файла ttf вы можете использовать вышеупомянутый метод преобразования ttf в woff2 для получения woff2.
Давайте поговорим о преобразовании шрифтов здесь: иногда студенты-художники также предоставляют нам файлы ttc.Это не один шрифт, а пакет из нескольких шрифтов.Из него нужно извлечь ttf, прежде чем вы сможете его использовать.Вы можете попробовать использовать его .TTC2TTF.
Сжатие шрифтов по запросу
В общем, хоть шрифт и конвертируется в формат woff2, но минимум все же несколько сотен К, а в большем количестве случаев будет около 1-4М. Иногда у нас есть только несколько текстов, для которых нужно использовать специальные шрифты, например только0-9Эти 10 номеров используют специальный шрифт.Если импортировать весь файл шрифта, то в этом нет необходимости.Это больше, чем нарезка 10 картинок. К счастью, есть технологии, которые могут0-9Извлекаются подмножества шрифтов, соответствующие этим 10 числам. я обычно используюшрифт-паук слово паукизвлекать.
Во-первых, глобально установите font-spider:
npm install font-spider -g
Затем создайте новый html-файл, например, имя файлаindex.html, который содержит весь текст, который вы хотите извлечь, в одном элементе, например, 0-9, и определите специальный шрифт, который вы хотите использовать для этого элемента:
<h1>0123456789</h1>
<style>
@font-face {
font-family: 'sourceHan';
src: url('./SourceHanSansCN-Regular.ttf');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'sourceHan';
}
</style>
Наконец, выполните следующую команду в каталоге, где находится этот html-файл:
font-spider index.html
В это время оригиналSourceHanSansCN-Regular.ttfбудет перемещен в.font-spider/директории, и шрифт в исходном месте будет заменен только извлеченным0-9файл шрифта. Этот объем отличается на несколько порядков:
Полный размер файла шрифта составляет 10M:
извлекать только0-9Файл шрифта на 10 номеров всего 7К:
Поэтому, если содержимое вашего веб-сайта статично и не изменяется, рекомендуется использовать font-spider для извлечения текста, который вы хотите использовать, что значительно уменьшит размер файла шрифта.
Унифицированное время рендеринга
Конвертируйте шрифты в WOFF2, а веб-сайты со статическим содержимым используют font-spider для сжатия по требованию, что дает вам хороший контроль над размером шрифта. (PS: GZIP для шрифта WOFF2 включать не обязательно, т.к. сам текст шрифта сжимается).
Наконец, давайте взглянем на влияние скорости сети на содержимое шрифта.Если вся ваша веб-страница использует определенный шрифт, определение CSS выглядит следующим образом:
@font-face {
font-family: myfont;
src: url('./myfont.woff2') format('woff2');
}
body {
font-family: myfont;
}
Если размер файла myfont.woff2 составляет 4 МБ, а скорость загрузки по сети составляет всего 1 МБ/с, загрузка шрифта займет 4 секунды. Поскольку удаленный шрифт не был загружен в течение 4 секунд, какой шрифт будет использовать браузер для рендеринга? На самом деле разные браузеры ведут себя по-разному, вот некоторые распространенные настольные браузеры:
-
IE: он будет напрямую отображаться с альтернативным шрифтом и, наконец, повторно отображаться после загрузки шрифта веб-шрифта.
-
Safari: он ожидает загрузки веб-шрифта и не отображает шрифт в это время.
-
Chrome/Firefox: они ждут загрузки веб-шрифта и, если он не загружается в течение 3 секунд, отображают его с альтернативным шрифтом. Наконец, веб-шрифт загружается, используется и перерисовывается.
Нам нужно найти способ унифицировать это поведение.Идеальное поведение — сначала использовать системный шрифт по умолчанию, а затем заменить его специальным шрифтом после загрузки удаленного шрифта. посредствомWebFontLoaderЭтого эффекта можно легко добиться. Давайте посмотрим, как его использовать:
- Определить шрифт в css через @font-face:
@font-face {
font-family: 'myfont';
src: url('./myfont.woff2') format('woff2');
}
Обратите внимание, что вам нужно только определить шрифт в CSS, не используйте этот шрифт.
- Затем импортируйте webfontloader (который также можно установить через npm), добавьте имя шрифта, которое вы определили в css, в
custom.familieslist и добавьте шрифт к соответствующему элементу в активном обратном вызове, код выглядит следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['myfont'],
},
classes: false,
active() {
document.body.style.fontFamily = 'myfont';
},
});
</script>
Таким образом, браузер будет использовать шрифт по умолчанию для рендеринга содержимого в начале, а затем использовать специальный шрифт для повторного рендеринга после загрузки шрифта.
резюме
Про навыки оптимизации шрифтов я сначала напишу сюда.Если есть вопросы, оставьте сообщение для обмена.