Ах, это мир, в котором даже шрифты должны похудеть.

CSS шрифт

Ананас: «Босс, вам обязательно использовать этот шрифт для этих чисел? Нельзя Yahei или Pingfang?»

Большой дизайнер посмотрел на ананас с обиженным выражением лица: «А этот шрифт выглядит хорошо».

Выражение выглядит следующим образом:

Эй, ни за что, этот взгляд заставляет людей чувствовать, что они каждую минуту совершают преступление. Тогда мы можем сделать только шрифт-начертание, но всего 10 арабских цифр стоят 77К, это то! Нет, нет, нет, похудеть.

АнанасХОРОШО

font-carrier:GitHub.com/purple поместите MBO…
Применимая ситуация: знать текст, который необходимо отобразить.Например, для выполнения вышеуказанных требований нужны только арабские цифры, что можно выполнить за один шаг.

  1. npm установить шрифт-носитель
npm install font-carrier --save
  1. Создайте новый index.js и сохраните следующий код локально
// 待抽取的字
var text = '0123456789';

// 引入font-carrier.js
var fontCarrier = require('font-carrier');

// 解析本地原来的字体文件
var transFont = fontCarrier.transfer('font/DIN Alternate Bold.ttf'); // font/DIN Alternate Bold.ttf替换成你的字体文件地址

// 创建目标字体
var font = fontCarrier.create();

// 向字体中写入抽取的字形信息
font.setGlyph(transFont.getGlyph(text));

// 导出新字体到文件夹
// 默认会导出svg,ttf,eot,woff四种字体
// path结尾默认为导出新字体文件的名称
font.output({
   path:'./fontMin' // 在当前路径导出fontMin.ttf等四种字体文件
});
// or
// font.output({
//   path:'./fontMin/aaa' // 在当前路径的fontMin文件夹下导出aaa.ttf等四种字体文件
// });
  1. Запустите index.js, чтобы получить уменьшенный файл шрифта.
node index.js
  1. использовать шрифты
@font-face{
  font-family: "your font name";
  src: url("your font file url");
}

.text{
  font-family: "your font name";
}

Несколько важных свойств @font-face:

  1. font-familyНе используйте имя шрифта самой системы, такое как «Microsoft Yahei», это приведет к перекрытию, очень бедственному случаю, а другие не являются обязательными;
  2. srcВы можете использовать локальный (местный шрифт) и URL (не междоменный онлайн-адрес), чтобы улучшить работу;
  3. font-weightРазличные шрифты могут быть перезагружены в соответствии с разными символами, чтобы сделать визуальное восприятие шрифта более тонким;
  4. unicode-rangeФункция заключается в использовании определенного шрифта для определенного символа или фрагмента символа. Например, отдельно определите шрифт, используемый двойными кавычками.

Здесь рекомендуется статья Чжан Дашеня:По-настоящему понять правила шрифта @font в контексте CSS3.

резюме

  1. Хотя файл шрифта, использованный на этот раз, представляет собой пакет английских шрифтов, размер невелик, но изменение с 77 КБ на 3 КБ все же значительное.Если вас интересуют шрифты, вы можете использоватьwakamaifondueАнализ файлов шрифтов.
  2. Font-носитель очень удобен для сокращения файлов шрифтов, которые, как известно, используют текст, а поскольку текущие текстовые данные получаются через интерфейс, он не подходит для использования инструмента сканирования.
  3. Если вам нужно сканировать китайские символы, используемые в файлах html/css/js (поскольку файлы китайских шрифтов относительно велики, обычно требуется сжатие файлов китайских шрифтов), использование шрифта-носителя не подходит, вы можете изучить о слове паукFontSpider.
Категории