Unduh postcss font pack - Unduh Kode Sumber postcss font pack

postcss font pack

Pengunduhan font

1.0.0

Unduh

postcss-font-pack

Plugin PostCSS untuk menyederhanakan deklarasi font dengan memvalidasi paket font yang dikonfigurasi yang digunakan, menambahkan fallback dan mentranspiling nilai deklarasi font yang dapat dibaca manusia ke CSS yang valid.

Perkenalan

Berurusan dengan font bisa menyebalkan, terutama pada tim di mana tidak semua orang tahu di mana menemukan font yang tepat yang diizinkan untuk digunakan. Akibatnya, kesalahan dilakukan, ketidakkonsistenan diperkenalkan dan pemeliharaan menjadi mimpi buruk. Paket Font PostCSS bertujuan untuk menyelesaikan masalah ini dengan konfigurasi.

Konfigurasi

Mari kita mulai dengan asumsi berikut:

Kami menggunakan "Times New Roman" karena ini adalah font aman web yang umum digunakan. Ini juga menggambarkan cara menggunakan font yang membutuhkan kutipan di plugin ini.
Kami telah menginstal Roboto dan sudah menyiapkan @font-face.

Font ini dapat didefinisikan dalam format JSON. Anda mungkin menyebutnya 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 "
			}
		]
	}
}

Dengan konfigurasi di atas, kami dapat menulis CSS kami menggunakan properti steno font:

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

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

Ini akan ditranspile ke yang berikut:

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

Perhatikan beratnya berubah dari bold menjadi 700 dan dari light menjadi 300 . Ini berasal dari alias nilai deklarasi konfigurasi, yang didefinisikan sebagai "weight": ["bold", 700] dan "weight": ["light", 300] , masing -masing. Anda dapat melakukan ini dengan salah satu grup prop, tetapi karena style: italic , stretch: condensed dan variant: small-caps sudah dipahami oleh browser, masuk akal untuk menggunakan alias untuk berat dalam kasus ini. Anda bisa memiliki berat yang sama baiknya dengan "weight": 300 , tapi itu tidak bisa light manusia, yang tidak dipahami oleh browser.

Juga, perhatikan bahwa font fallback ditambahkan ke font-family . Ini memungkinkan Anda untuk menjaga sintaks Anda mudah dibaca/ditulis dan membiarkan plugin melakukan pekerjaan kotor dengan konfigurasi.

Anda tidak harus menggunakan properti steno font. Anda juga dapat menuliskan setiap deklarasi secara individual atau Anda dapat menggunakan plugin postcss-nested-props untuk mengaktifkan sintaks bersarang. Pastikan Anda membuka bungkus yang bersarang dengan plugin itu sebelum Anda menjalankan yang ini.

Berbaris

Plugin ini juga menangani serat sehingga Anda dapat tidur suara mengetahui bahwa tidak ada yang menggunakan font atau kombinasi deklarasi font yang tidak didukung atau tidak bertentangan dengan desain situs. Aturan berikut semua akan melempar kesalahan yang sama, "pack not found":

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

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

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

Meskipun bobot light ditemukan dalam konfigurasi Anda, tidak ada paket font yang menggunakan light tanpa juga menggunakan italic dan condensed . Anda harus menggunakan ketiganya bersama -sama untuk membentuk paket dan lulus berberat.

Seperti yang Anda lihat, plugin ini akan menghentikan deklarasi font yang tidak didukung mati di jalurnya.

Mengabaikan bagian

Jika Anda perlu mengabaikan deklarasi tertentu, tetapi tidak ingin mengabaikan seluruh stylesheet, Anda dapat melakukannya dengan mendahului deklarasi dengan komentar khusus:

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

Ini akan menyebabkan linter hanya mengabaikan pemilih berikutnya .

Anda juga dapat mengabaikan rentang:

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

Instalasi

 $ npm install postcss-font-pack

Penggunaan

Javascript

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

Naskah

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

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

Opsi

`ignoreDeclarations`

Type: { [prop: string]: string; } Diperlukan: false Default: undefined

Kumpulan deklarasi yang ingin Anda abaikan. Ini bisa berupa peretasan CSS atau hal lain yang Anda benar -benar tidak ingin melakukan kesalahan validasi. Contoh di bawah ini:

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

`requireSize`

Jenis: boolean Diperlukan: false Default: false

Ketika true , kesalahan akan dilemparkan jika Anda memiliki aturan dengan satu atau lebih deklarasi font, tetapi tanpa ukuran font.

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

Terlepas dari opsi ini, jika Anda memiliki aturan dengan hanya font-size yang ditentukan, Anda akan mendapatkan kesalahan:

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

`packs`

Jenis: Diperlukan Object : true

Objek literal di mana kunci adalah font slugified dan nilainya adalah paket font. Setiap paket font terdiri dari family yang diperlukan dan koleksi grup properti opsional, dinamai sebagai propGroups .

`pack.family`

Jenis: string[] Diperlukan: true

Jika siput font Anda adalah times , di sinilah Anda akan mendefinisikan nama font yang diperluas bersama dengan fallback apa pun.

Catatan: Jika nama font Anda membutuhkan kutipan, Anda harus menambahkannya sendiri.

`pack.propGroups`

Jenis: PropGroup[] Diperlukan: false

Tentukan kombinasi properti yang dapat digunakan bersama untuk merujuk font.

`pack.propGroups[n]`

Jenis: PropGroup

Setiap grup prop dapat berisi 0 atau lebih dari kunci berikut:

weight
style
variant
stretch

Setiap nilai dapat berupa string atau string[] dengan dua nilai. Nilai pertama adalah nilai slugified yang dapat Anda ketik dalam CSS Anda untuk merujuk kunci yang terkait. Nilai kedua adalah apa nilai pertama akan ditranspilasi, jadi pastikan mereka CSS-valid. Nilai weight juga bisa menjadi angka.

Jika objek kosong disediakan, ini menunjukkan bahwa Anda ingin mendukung keluarga font ini dengan nilai browser default untuk berat, gaya, varian, dan peregangan.

Catatan: Jika Anda tidak menyertakan objek kosong, Anda tidak akan dapat merujuk keluarga tanpa juga merujuk properti tambahan.