Фонт-сабсеттинг
От: Alekzander  
Дата: 10.12.24 20:39
Оценка: 86 (2)
Открыл для себя такую технику. Можно выбрать из фонта (например, с математическими символами или иконками) только те глифы, которые реально нужны, и запаковать их в base64 data URL. Получаются (относительно) короткие строки, которые можно вставить в CSS, и далее их юзать (либо из разметки, либо через content). Выглядит примерно так:

@font-face {
  font-family: "VectorLib";
  font-style: normal;
  font-display: swap;
  src: url("data:font/woff2;base64,--строка-с-закодированными-глифами--")
    format("woff2");
}


Эта техника является альтернативой инлайнингу SVG.

Ещё мне посоветовали такую тулзу: https://transfonter.org/, которая автоматизирует оба процесса (отбор символов и энкодинг в data URL), но её я пока не смотрел.
I'm a sewer mutant, and my favorite authors are Edgar Allan Poo, H.G. Smells and George R.R. Martin.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.