ดาวน์โหลด postcss font pack - postcss font pack Source Source Download Download

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 ของเราโดยใช้คุณสมบัติ Font Shorthand:

. 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;
}

สิ่งนี้จะทำให้ 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

การใช้งาน

จาวาสคริปต์

 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 หรืออย่างอื่นที่คุณไม่ต้องการให้เกิดข้อผิดพลาดในการตรวจสอบความถูกต้อง ตัวอย่างด้านล่าง:

 {
	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

ตัวอักษรวัตถุที่คีย์เป็นแบบอักษร slugified และค่าเป็นแพ็คแบบอักษร แพ็คแบบอักษรแต่ละตัวประกอบด้วย family ที่ต้องการและชุดสะสมของกลุ่มอสังหาริมทรัพย์ที่มีชื่อว่าเป็น propGroups

`pack.family`

ประเภท: string[] จำเป็น: true

หาก Slug Font ของคุณเป็น times ที่นี่คือที่ที่คุณจะกำหนดชื่อตัวอักษรขยายพร้อมกับทางเลือกใด ๆ

หมายเหตุ: หากชื่อตัวอักษรของคุณต้องการใบเสนอราคาคุณต้องเพิ่มด้วยตัวคุณเอง

`pack.propGroups`

ประเภท: PropGroup[] จำเป็น: false

กำหนดชุดค่าผสมที่สามารถใช้ร่วมกันเพื่ออ้างอิงแบบอักษร

`pack.propGroups[n]`

ประเภท: PropGroup

แต่ละกลุ่มเสาอาจมีคีย์ 0 หรือมากกว่าต่อไปนี้:

weight
style
variant
stretch

แต่ละค่าสามารถเป็น string หรือ string[] ที่มีสองค่า ค่าแรกคือค่า slugified ที่คุณสามารถพิมพ์ใน CSS ของคุณเพื่ออ้างอิงคีย์ที่เกี่ยวข้อง ค่าที่สองคือสิ่งที่ค่าแรกจะถูกส่งไปยังดังนั้นตรวจสอบให้แน่ใจว่าพวกเขาเป็น css-valid ค่า weight อาจเป็นตัวเลขเพิ่มเติม

หากมีการจัดเตรียมวัตถุเปล่าสิ่งนี้บ่งชี้ว่าคุณต้องการสนับสนุนตระกูลตัวอักษรนี้ด้วยค่าเบราว์เซอร์เริ่มต้นสำหรับน้ำหนักสไตล์ตัวแปรและการยืด

หมายเหตุ: หากคุณไม่รวมวัตถุเปล่าคุณจะไม่สามารถอ้างอิงครอบครัวได้โดยไม่ต้องอ้างอิงคุณสมบัติเพิ่มเติม