postcss font pack

Postcss-font-pack

PostCSS插件通过仅使用仅验证配置的字体包来简化字体声明，将后备添加并将人类可读字体声明值添加到有效的CSS中。

介绍

处理字体可能会很痛苦，尤其是在团队中，并非每个人都知道在哪里可以找到允许使用的确切字体。结果，犯了错误，引入了不一致，维护成为一场噩梦。 PostCSS字体包的目的是通过配置解决此问题。

配置

让我们从以下假设开始：

• 我们使用“ Times New Roman”，因为它是一种常用的Web安全字体。它还说明了如何使用此插件中需要引号的字体。
• 我们已经安装了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重量，也没有字体包在不使用italic和condensed情况下使用light 。您必须将所有三个组合在一起以形成包装并通过覆盖。

如您所见，此插件将停止未支持的字体声明在其轨道上死亡。

忽略部分

如果您需要忽略特定的声明，但不想忽略整个样式表，则可以通过特别评论在声明之前这样做：

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

这将导致Linter仅忽略下一个选择器。

您也可以忽略范围：

 /* 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默认值： undefined

您想忽略的一系列声明。这些可能是CSS hacks或其他您真的不想抛出验证错误的其他内容。下面的示例：

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

requireSize

类型： boolean必需： false默认值： 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

如果您的字体slug是times ，那么您将在这里定义扩展字体名称以及任何后备。

注意：如果您的字体名称需要报价，则必须自己添加它们。

pack.propGroups

类型： PropGroup[]必需： false

定义可用于引用字体的属性组合。

pack.propGroups[n]

类型： PropGroup

每个道具组可能包含以下0个或更多键：

• weight
• style
• variant
• stretch

每个值可以是具有两个值的string string[] 。第一个值是一个slugified值，您可以在CSS中输入以引用关联的密钥。第二个值是将第一个值转移到的值，因此请确保它们是CSS-VALID。 weight值还可以是数字。

如果提供了一个空对象，则表明您要支持具有重量，样式，变体和伸展的默认浏览器值的字体家族。

注意：如果您不包含一个空对象，则您将无法参考家庭，而无需引用其他属性。

测试

运行以下命令：

 $ npm test

这将构建脚本，运行测试并生成代码覆盖报告。任何不到100％的覆盖范围都会出现错误。

看

对于更快的开发周期，请在两个单独的过程中运行以下命令：

 $ npm run build:watch

将打字稿源编译到./dist文件夹中，并观看更改。

 $ npm run watch

在./dist文件夹中运行测试，并观看更改。