قاعدة CSS @font-face

استخدام قاعدة @font-face لربط اسم الخط المستخدم في سلة الأسلوب بخطوص قابلة للتنزيل معينة، حيث تحدد قاعدة @font-face CSS at-rule الخطوص المخصص لعرض النص.

　استخدام عائلة الخطوص في القاعدةfont-familyوصف الخصائص لتحديد اسم الخط، وsrc يربط اسم الخط الخارجي.

استخدام النحو

النحو للقاعدة هو:

@font-face: description of font

تحتوي قاعدة @font-face على إعلانات لأحد أو أكثر الخصائص، تمامًا مثل تلك في CSS العادي، وتُعرف بوصف الخط. يمكنك تحديد أقصى 24 خاصية مختلفة، ولكن تبريرها جميعًا يتجاوز نطاق هذه الوثيقة- للحصول على معلومات إضافية، يرجى زيارةوحدة الخطوص CSS من W3Cالصفحة.

نموذج قاعدة @font-face العامة هو:

يمكن استخدام الخط لاحقًا كصفة (مثلfont-familyوالأسماء في ()font، ولكن إذا لم يتم دعم الخطوط القابلة للتنزيل أو إذا لم يتم تحميل الخط لأي سبب من الأسباب، فيجب تحديد اسم خط آخر كخيار احتياطي.

المثال التالي يوضح كيفية استخدام خاصية @font-face.

　　@font-face {
　　　font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　body {
　　　font-family: "OpenSans", Arial, sans-serif;
　　　font-size: 1.2em;
　　}

من خلال تعيين القواعد المناسبة، يمكن أيضًا تعيين خيار تنزيل الخطوص إلى الخطوط المتاحة باستخدام @font-face عند تعيين خصائص الخط المحددة مثل العريض أو المائل.

　　@font-face {
	font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　@font-face {
　　　font-family: "OpenSansBold";
　　　src: url("../fonts/OpenSans-Bold.eot");
	src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
　　}
　　h1 {
　　　font-family: "OpenSansBold", Arial, sans-serif; /* تحديد الخط الثقيل OpenSans */
　　}
　　p {
　　　font-family: "OpenSans", Arial, sans-serif;
　　}

المستوى

معنى المستويات كالتالي:

متوافق مع المتصفحات

متوافق مع متصفحات @font-face الخاصية، الأرقام في الجدول التالي تعبر عن إصدار أحدث متصفح يدعم الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه القاعدة.

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:CSS الخطوط。