Загрузка пакета postcss font pack postcss font pack -

postcss font pack

Загрузка шрифта

1.0.0

Скачать

postcss-font-pack

Плагин PostCSS для упрощения объявлений шрифтов путем подтверждения только настроенных пакетов шрифтов, добавляя запасные отступнические и транспингирующие значения объявления шрифтов с человеком в действительный CSS.

Введение

Работа с шрифтами может быть болью, особенно в командах, где не все знают, где найти точные шрифты, которые им разрешают использовать. В результате делаются ошибки, вводятся несоответствия, а обслуживание становится кошмаром. Postcss Font Pack стремится решить эту проблему с помощью конфигурации.

Конфигурация

Начнем со следующих предположений:

Мы используем «Times New Roman», потому что это обычно используемый веб -шрифт. Это также иллюстрирует, как использовать шрифты, которые нуждаются в кавычках в этом плагине.
Мы установили Roboto и уже настроили его @font-face.

Эти шрифты могут быть определены в формате JSON. Вы можете назвать это font-packs.json :

{
	"times" : {
		"family" : [ " 'Times New Roman' " , " Times " , " serif " ],
		"propGroups" : [
			{},
			{
				"weight" : [ " bold " , 700 ]
			}
		]
	},
	"roboto" : {
		"family" : [ " Roboto " , " Arial " , " sans-serif " ],
		"propGroups" : [
			{
				"style" : " italic " ,
				"weight" : [ " light " , 300 ],
				"stretch" : " condensed " ,
				"variant" : " small-caps "
			}
		]
	}
}

При вышеуказанной конфигурации мы можем написать наш CSS, используя свойство шрифта.

. foo {
	font : bold 1 rem/1.2 times;
}

. bar {
	font : light condensed italic 1 rem/1.2 roboto;
}

Это перейдет в следующее:

. foo {
	font : 700 1 rem/1.2 'Times New Roman' , Times , serif;
}

. bar {
	font : 300 condensed italic 1 rem/1.2 Roboto , Arial , sans-serif;
}

Обратите внимание, что вес был изменен с bold на 700 и с light на 300 . Это произошло из псевдонимов значения декларации конфигурации, которые были определены как "weight": ["bold", 700] и "weight": ["light", 300] соответственно. Вы можете сделать это с любой из групп проповеданий, но, поскольку style: italic , stretch: condensed и variant: small-caps уже поняты браузером, имело смысл использовать псевдоним для веса в этом случае. Вы могли бы так же хорошо справиться с весом, как "weight": 300 , но это не так читается человеком, как light , который браузер не понимает.

Кроме того, обратите внимание, что запасные шрифты были добавлены в font-family . Это позволяет вам легко читать/записать ваш синтаксис и позволить плагину выполнять грязную работу с конфигурацией.

Вам не нужно использовать свойство шрифта. Вы также можете записать каждое объявление индивидуально, или вы можете использовать плагин postcss-nested-props чтобы включить вложенный синтаксис. Просто убедитесь, что вы развернули вложенную этим плагином, прежде чем запустить этот.

Лининг

Этот плагин также обрабатывает лининг, чтобы вы могли спать звук, зная, что никто не использует шрифты или комбинации деклараций шрифтов, которые не поддерживаются или иным образом иным образом иным образом противостоят дизайну сайта. Следующие правила принесли бы одну и ту же ошибку, «Пакет не найден»:

. foo {
	font-family : "Futura PT" ;
}

. bar {
	font-family : roboto , sans-serif;
}

. baz {
	font : light 1 rem/1.2 roboto;
}

Несмотря на то, что light вес находится в вашей конфигурации, нет пакета шрифтов, который использует light , не используя italic и condensed . Вы должны использовать все три из них вместе, чтобы сформировать упаковку и пропустить линию.

Как вы можете видеть, этот плагин остановит неподдерживаемые декларации шрифтов мертвых в своих треках.

Игнорируя разделы

Если вам нужно игнорировать конкретное объявление, но не хотите игнорировать всю таблицу стилей, вы можете сделать это, предшествовав декларации со специальным комментарием:

. foo {
	/* postcss-font-pack: ignore-next */
	font : "Comic Sans" , cursive;
}

Это приведет к тому, что Линтер игнорирует только самый следующий селектор.

Вы также можете игнорировать диапазоны:

 /* postcss-font-pack: start-ignore */
. foo {
	font : "Comic Sans" , cursive;
	font-size : 38 px ;
}
/* postcss-font-pack: end-ignore */

Установка

 $ npm install postcss-font-pack

Использование

JavaScript

 postcss ( [
	require ( 'postcss-font-pack' ) ( {
		packs : require ( './font-packs.json' )
	} )
] ) ;

Машинопись

 import * as postcssFontPack from 'postcss-font-pack' ;

postcss ( [
	postcssFontPack ( {
		packs : require ( './font-packs.json' )
	} )
] ) ;

Параметры

`ignoreDeclarations`

Тип: { [prop: string]: string; } Требуется: false Default: undefined

Коллекция заявлений, которые вы хотели бы игнорировать. Это могут быть хакеры CSS или что -то еще, что вы действительно не хотите бросать ошибки проверки. Пример ниже:

 {
	ignoreDeclarations : [
		{ font : '0/0 serif' }
	]
}

`requireSize`

Тип: boolean требуется: false Default: false

Когда true будет вынесена ошибка, если у вас есть правило с одним или несколькими объявлениями шрифта, но без размера шрифта.

. foo {
	font-family : roboto;
	/* missing required font-size */
}

Независимо от этой опции, если у вас есть правило только с указанным font-size вы получите ошибку:

. foo {
	font-size : 1 rem ;
	/* font-size missing required family */
}

`packs`

Тип: Object требуется: true

Литерал объекта, где клавиши являются шрифтами, и значениями являются пакетами шрифтов. Каждый пакет шрифтов состоит из требуемой family и дополнительной коллекции групп недвижимости, названной как propGroups .

`pack.family`

Тип: string[] требуется: true

Если ваш шрифтный слизняк - это times , вы бы определили расширенное имя шрифта вместе с любыми запасными.

Примечание. Если ваше имя шрифта требует цитаты, вы должны добавить их самостоятельно.

`pack.propGroups`

Тип: PropGroup[] Требуется: false

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

`pack.propGroups[n]`

Тип: PropGroup

Каждая группа поддержки может содержать 0 или более из следующих ключей:

weight
style
variant
stretch

Каждое значение может быть string или string[] с двумя значениями. Первое значение - это слабированное значение, которое вы можете ввести в свой CSS для ссылки на связанный ключ. Второе значение-это то, во что будет перенесено первое значение, поэтому убедитесь, что они имеют CSS-Valid. Значения weight могут быть дополнительно числа.

Если предоставлен пустой объект, это указывает на то, что вы хотите поддержать эту семейство шрифтов с значениями браузера по умолчанию для веса, стиля, варианта и растяжения.

Примечание. Если вы не включите пустой объект, вы не сможете ссылаться на семью, не ссылаясь на дополнительные свойства.