تنزيل 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 لتمكين بناء جملة متداخل. فقط تأكد من فكك المتداخل مع هذا البرنامج المساعد قبل تشغيل هذا واحد.

linting

يتولى هذا البرنامج المساعد أيضًا أن يتلاءم حتى تتمكن من النوم مع العلم أن لا أحد يستخدم الخطوط أو مجموعات من إعلانات الخطوط غير المدعومة أو تتعارض مع تصميم الموقع. القواعد التالية ستعرض جميع الخطأ نفسه ، "حزمة لم يتم العثور عليها":

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

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

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

على الرغم من أن الوزن light موجود في التكوين الخاص بك ، لا توجد حزمة خطية تستخدم light دون استخدام أيضًا italic condensed . يجب عليك استخدام جميعهم الثلاثة معًا لتشكيل حزمة ولتمرير Linting.

كما ترون ، سيتوقف هذا المكون الإضافي عن إعلانات الخط غير المدعوم ميتاً في مساراتهم.

تجاهل الأقسام

إذا كنت بحاجة إلى تجاهل إعلان محدد ، لكن لا تريد تجاهل ورقة الأنماط بأكملها ، فيمكنك القيام بذلك عن طريق تمييز الإعلان بتعليق خاص:

. 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' )
	} )
] ) ;

TypeScript

 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

كائن حرفي حيث تكون المفاتيح خطوطًا محفوظة والقيم هي حزم الخطوط. تتكون كل حزمة خط من family مطلوبة ومجموعة اختيارية من مجموعات العقارات ، تسمى على أنها propGroups .

`pack.family`

النوع: string[] مطلوب: true

إذا كان Slug Font الخاص بك هو times ، فهذا هو المكان الذي ستحدد فيه اسم الخط الموسع مع أي احتياجات.

ملاحظة: إذا كان اسم الخط الخاص بك يتطلب اقتباسات ، فيجب عليك إضافتها بنفسك.

`pack.propGroups`

النوع: PropGroup[] مطلوب: false

حدد مجموعات الممتلكات التي يمكن استخدامها معًا للإشارة إلى خط.

`pack.propGroups[n]`

النوع: PropGroup

قد تحتوي كل مجموعة دعامة على 0 أو أكثر من المفاتيح التالية:

weight
style
variant
stretch

يمكن أن تكون كل قيمة string أو string[] مع قيمتين. القيمة الأولى هي قيمة مبتكرة يمكنك كتابة CSS الخاصة بك للرجوع إلى المفتاح المرتبط. القيمة الثانية هي ما سيتم نقل القيمة الأولى إليها ، لذا تأكد من أنها CSS-Valid. يمكن أن تكون قيم weight بالإضافة إلى ذلك أرقامًا.

إذا تم توفير كائن فارغ ، فهذا يشير إلى أنك تريد دعم عائلة الخط هذه بقيم المتصفح الافتراضية للوزن والأناقة والبديل والتمدد.

ملاحظة: إذا لم تقم بتضمين كائن فارغ ، فلن تتمكن من الرجوع إلى عائلة دون الرجوع أيضًا إلى خصائص إضافية.