Пользовательское решение для шрифта H5 (отметка)

внешний интерфейс

Сценарий приложения

Предприятию необходимо использовать шрифты, указанные в исходном проекте дизайна.После использования @font-face для введения было обнаружено, что пакет шрифтов слишком велик, около 10 М, и каждый запрос на 10 М трафика на сервере вызовет нагрузку на сервер и влияют на пользовательский опыт.

Шаг 1: Используйте @font-face

Обзор MDN

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

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

Применение

@font-face At-rule CSS указывает пользовательский шрифт для отображения текста; шрифт может быть загружен с удаленного сервера или шрифт, установленный пользователем локально. Если указана функция local(), выполняется поиск указанного имени шрифта локально от пользователя, и если совпадение найдено, будет использоваться локальный шрифт, в противном случае шрифт будет использовать ресурс, загруженный функцией url().
Позволяя авторам предоставлять свои собственные шрифты, @font-face позволяет создавать контент, не ограничиваясь так называемыми «веб-безопасными» шрифтами (шрифты настолько распространены, что широко используются). имена шрифтов позволяют настраивать шрифты в большей степени, чем базовые шрифты, при этом активируя эту функциональность, не полагаясь на сеть.
При одновременном использовании функций url() и local() для того, чтобы копия шрифта, установленного пользователем, использовалась, когда это необходимо, если копия шрифта не найдена в локальной папке пользователя. , он перейдет к копии, загруженной пользователем, для поиска шрифта.
Правило @font-face используется не только на верхнем уровне CSS, но также может использоваться в любом правиле условной группы CSS.

Короче говоря, @font-face преодолевает ограничения сетевой безопасности, позволяя авторам свободно использовать шрифты, которые они хотят, и может использоваться в любых правилах условной группы CSS.Здесь нет никакого дополнительного расширения для его функции local(). Ниже приведено ежедневное использование

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),//后缀是字体文件格式 常见有ttf svg等
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Вот сайт онлайн конвертации шрифтовПреобразование формата шрифта

Шаг 2: Сожмите пакет шрифта

После успешного внедрения обнаруживается, что пакет шрифтов слишком велик, и здесь задействовано сжатие пакета шрифтов с использованием компрессора пакетов шрифтов font-spider.

Использование шрифта-паука

Фундаментальный

Удалите оставшийся неиспользуемый текст, сопоставив текст, используемый в html. Для достижения цели сжатия пакета шрифтов.

Установить

npm install font-spider -g

Учащиеся, у которых не установлен узел npm, найдите способ установки

использовать

@font-face {
    font-family: mysimhei;
    src: url(../../../simhei.ttf);
}
p{
    font-family: mysimhei;
}

Обратите внимание: если вы используете его, вам нужно сначала импортировать его в файл css.

font-spider ./demo/*.html

Знак * здесь означает соответствие всем или указание html.

font-spider ./demo/*.html ./demo/pages/index.html

Разделяйте несколько файлов пробелами

Сжатие завершено

Будет создан резервный файл шрифта и сжатый пакет шрифтов.

Существует проблема

Слово «паук» опробовано на небольшом локальном проекте

Не рекомендуется для больших проектов или одностраничных приложений.

  • Элементы, не поддерживающие динамическую визуализацию
  • Кодировка GBK не поддерживается
  • Многостраничная поддержка не является дружественной

Но на гитхабе уже есть библиотека расширения word spider, можете попробовать.

чат

На самом деле, это связано с гонконгским бизнесом.В операционной системе win10 в Гонконге нет жирного шрифта.Клиенты считают, что шрифты разные и влияют на опыт.Пакет шрифтов слишком велик, поэтому я нашел решение этого набора сжатия шрифтов. (скромный стажер)

Категории