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文件夾中運行測試，並觀看更改。