ستتحدث هذه المدونة عن استخدام قاعدة CSS @ font-face.
ما هي CSS @ font-face Rule؟
تُستخدم قاعدة @ font-face في CSS لإنشاء خطوط مخصصة لمشاريعنا. يمكن تحميل هذه الخطوط من الخادم أو الخطوط المثبتة على النظام.
كيفية استخدام CSS @ font-face Rule؟
تم ذكر بناء الجملة لاستخدام قاعدة CSS @ font-face أدناه:
@ font-face {
خط العائلة : MyNewFont ؛
src : عنوان url ( )
}
يتم تعريف قاعدة @ font-face من خلال تحديد قيمة في خاصية font-family وعنوان URL المرتبط من حيث يوجد هذا الخط كسمة src.
مثال
في المثال أدناه ، سنخصص الخطوط. للقيام بذلك ، أولاً ، قم بتنزيل الخطوط من المتصفح وإضافتها إلى مجلد مشروعك. يمكنك أيضًا استخدام الروابط إذا كنت تستخدم خطوطًا من الخادم.
أولاً ، أضف علامتي
و ، ثم قم بتطبيقها لتخصيص الخطوط لكل منها. دعونا ننفذ السيناريو الموضح أعلاه في ثلاث خطوات.
الخطوة 1: أضف عناصر إلى ملف HTML
الخطوة 1: أضف عناصر إلى ملف HTML
في HTML ، داخل قسم
، أضف و لإضافة بعض المحتوى المرتبط بصفحة الويب:
< h2 > مرحبًا بك في Linuxhint! < / h2 >
< h1 > مرحبًا بك في Linuxhint! < / h1 >
الخطوة 2: حدد قاعدة @ font-face في CSS
< h2 > مرحبًا بك في Linuxhint! < / h2 >
< h1 > مرحبًا بك في Linuxhint! < / h1 >
الخطوة 2: حدد قاعدة @ font-face في CSS
لتحديد القاعدة ، الكلمة الرئيسية ' @ font-face 'في CSS. داخل أقواسها المتعرجة ، أضف خاصية font-family وأضف اسم الخط كقيمة له. بعد ذلك ، استخدم خاصية src لتحديد مسار URL للخط الذي تم تنزيله:
@ font-face {
خط العائلة : خطي ؛
src : عنوان url ( '/ Fonts / Batuphat \ Script.otf' ) ؛
}
وبالمثل ، سنضيف كتلة خط مخصصة أخرى:
@ font-face {خط العائلة : myfont2 ؛
src : عنوان url ( '/ Fonts / Olive_Vine \ DEMO.otf' ) ؛
}
الآن ، قم بتطبيق النمط على عنصري
و .
نمط عنصر h2
h2 {
خط العائلة : خطي ؛
حجم الخط : 50 بكسل ؛
}
نمط عنصر h2
h2 {خط العائلة : خطي ؛
حجم الخط : 50 بكسل ؛
}
الخصائص المطبقة على عنصر
موضحة أدناه:
- ' خط العائلة 'مع القيمة' خطي 'وهو ما أعلناه في قاعدة @ font-face.
- ' حجم الخط 'حجم الخط إلى 50 بكسل.
نمط عنصر h1
h1 {
خط العائلة : myfont2 ؛
حجم الخط : 70 بكسل ؛
اللون : بنى ؛
}
هنا ' اللون 'يتم استخدام الخاصية لتلوين الخط.
يمكن أن نرى من الصورة الموضحة أدناه أن علامات
و تم تصميمها بنجاح باستخدام الخطوط المعلنة حديثًا:
لقد قدمنا طريقة استخدام قاعدة CSS @ font-face.
استنتاج
تلعب أنماط الخطوط دورًا مهمًا في جعل أي تطبيق جذابًا من الناحية الجمالية. يحتوي نظامنا على أنماط خطوط محدودة ، بينما يحتاج المطور إلى خطوط مختلفة لإضافة الجمال إلى تطبيقات الويب الخاصة به. للقيام بذلك ، يتيح لنا CSS استخدام قاعدة @ font-face لإضافة خطوط مخصصة. لقد أوضحت هذه المقالة قاعدة @ font-face التي يمكنك من خلالها تخصيص نمط الخط في تطبيقنا.