يلعب الخط دورا مهما في التصميم المرئي لصفحة الويب. يفضل العديد من المستخدمين نصا سهل القراءة بخط كبير. بغض النظر عما إذا كنت تقوم بإنشاء موقع ويب أو مدونة ، فإن تغيير حجم الخط ونمطه يسمح لك بالتحكم في مظهر النص وقابليته للقراءة. ومع ذلك ، قد تبدو عملية تعيين الخط على الصفحة صعبة للمبتدئين.
في هذه المقالة ، سنلقي نظرة على بعض الطرق البسيطة لتخصيص خط كبير على صفحة الويب.
الطريقة الأولى هي استخدام سمة النمط. لزيادة حجم الخط ، يمكنك إضافة السمة التالية إلى عنصر هتمل: النمط= " حجم الخط: كبير؛". حدد حجم الخط الذي تحتاجه وحدده بدلا من "كبير". على سبيل المثال ، لتعيين حجم خط 20 بكسل ، يمكنك استخدام السطر التالي:
مثال على نص بخط مكبر
الطريقة الثانية هي استخدام كس. إنشاء ملف كس منفصل أو إضافة أنماط إلى واحد موجود. في كس ، يمكنك ضبط حجم الخط لعناصر مختلفة. على سبيل المثال ، يمكنك إضافة التعليمات البرمجية التالية إلى ملف كس لتعيين حجم خط 20 بكسل لجميع الفقرات:
- }
- الطريقة الثالثة هي استخدام المكتبات والأطر الجاهزة. إذا كنت لا ترغب في إنشاء أنماط بنفسك ، يمكنك استخدام حلول جاهزة مثل التمهيد أو الأساس. توفر هذه الأدوات عددا كبيرا من الأنماط الجاهزة ، بما في ذلك إعدادات حجم الخط.
- باستخدام العلامة
- تغيير حجم الخط باستخدام كس
- تطبيق سمة النمط لتعيين حجم الخط
- إنشاء فئة لخط كبير
- باستخدام ملف كس خارجي
تغيير حجم الخط في محرر هتمل
تطبيق سمة الخط لتعيين حجم الخط
تأثير توصيات إمكانية الوصول على حجم الخط
باستخدام العلامة
لاستخدام العلامة ، تحتاج فقط إلى لف النص المطلوب في علامتي الفتح والإغلاق لهذا العنصر:
إذا كنت بحاجة إلى إنشاء رأس أصغر ، فيمكنك استخدام العلامات المناسبة
,
الخ. لديهم حجم خط أصغر مقارنة، ولكن لا يزال لديهم أسلوب رائع.
تغيير حجم الخط باستخدام كس
- تغيير حجم الخط على صفحة ويب يمكن القيام به بسهولة باستخدام أوراق الأنماط المتتالية (كس). باتباع بعض الإرشادات البسيطة ، يمكنك ضبط حجم الخط حسب رغبتك وإنشاء تصميم مذهل لموقعك.
- 1. باستخدام وحدات القياس:
- يمكنك تحديد حجم الخط باستخدام وحدات مختلفة من القياس مثل بكسل (بكسل) ، النسب المئوية ( ٪ ) أو م.
بكسل (بكسل): يحدد حجم خط ثابت بالبكسل. على سبيل المثال ، حجم الخط: 16 بكسل;
النسب المئوية ( ٪ ): يحدد حجم الخط بالنسبة لحجم خط العنصر الأصل. على سبيل المثال ، حجم الخط: 150%;
в разделе head вашей HTML-страницы:إذا كنت ترغب في تغيير حجم الخط لجميع العناصر على صفحة ويب ، يمكنك استخدام أنماط كس العالمية. على سبيل المثال ، يمكنك إضافة التعليمات البرمجية التالية داخل الكتلةили во внешний файл стилей:
حجم الخط: 20 بكسل;
}
3. تطبيق الأنماط على عناصر محددة:
إذا كنت ترغب في تغيير حجم الخط لعنصر معين فقط ، يمكنك استخدام محددات كس. على سبيل المثال ، إذا كنت تريد تغيير حجم الخط لجميع رؤوس ح1 على الصفحة ، يمكنك إضافة التعليمات البرمجية التالية داخل الكتلة
}
في هتمل ، يمكنك استخدام سمة النمط لتحديد حجم الخط على الصفحة. للقيام بذلك ، حدد قيمة سمة النمط باستخدام خاصية حجم الخط وحدد الحجم المطلوب.
نموذج النص
وهكذا ، سيتم عرض كل النص داخل العلامة ص في حجم الخط من 16 بكسل.
إنشاء فئة لخط كبير
لإنشاء فئة لخط كبير ، تحتاج إلى تعريفه داخل العلامة
أو ملف كس خارجي. تحتاج إلى تحديد اسم فئة وتحديد خصائص النمط الخاصة به للخط. على سبيل المثال ، يمكنك استخدام فئة تسمى "نص كبير" وتعيينها على حجم خط 20 بكسل: |
.نص كبير {
حجم الخط: 20 بكسل; |
}
بعد تحديد فئة لخط كبير ، يمكنك تطبيقه على أي عناصر على صفحتك. للقيام بذلك ، أضف سمة "الفئة" إلى علامة العنصر وحدد اسم الفئة. على سبيل المثال ، إذا كنت تريد تعيين خط كبير للفقرات ، فأضف التعليمة البرمجية التالية:
نتيجة لذلك ، سترى أن النص في العنصر
| سيكون لها حجم خط متزايد ، والذي تم تعيينه في فئة" النص الكبير". | باستخدام ملف كس خارجي |
لتخصيص الخط الكبير على الصفحة ، يمكنك استخدام ملف كس خارجي. للقيام بذلك ، تحتاج إلى إنشاء ملف جديد مع التمديد.المغلق وكتابة الأنماط اللازمة في ذلك. | مثال على أنماط تثبيت خط كبير: |
/ * الأنماط.المغلق */ | الجسم { |
حجم الخط: 24 بكسل; | } |
لتطبيق أنماط من ملف خارجي ، تحتاج إلى إضافة عنصر خاص داخل كتلة التعليمات البرمجية هتمل من الصفحة:
حيث " الأنماط.كس " هو المسار إلى الملف الخارجي مع الأنماط ، والذي يقع في نفس الدليل مثل ملف هتمل.
بعد إضافة عنصر ، سيقوم المتصفح تلقائيا بتنزيل الأنماط من ملف خارجي وتطبيقها على محتوى الصفحة بالكامل. وبالتالي ، سيتم عرض جميع النصوص الموجودة على الصفحة بالخط بالحجم المحدد في النمط.
يمكن أن يكون استخدام ملف كس خارجي مفيدا إذا كنت بحاجة إلى تطبيق نفس الأنماط على صفحات متعددة من الموقع. في هذه الحالة ، يمكنك ببساطة ربط إلى ملف خارجي من ملفات هتمل مختلفة ، وسوف تتغير الأنماط تلقائيا على جميع الصفحات حيث يتم استخدام هذا الملف. هذا يجعل من السهل إدارة الأنماط وتغييرها حسب الحاجة.
| تغيير حجم الخط في محرر هتمل | تغيير حجم الخط في محرر هتمل بسيط للغاية. للقيام بذلك ، يمكنك استخدام العلامة مع سمة الحجم أو خاصية حجم الخط المغلق. |
|---|---|
| يمكنك استخدام العلامة لتغيير حجم الخط عن طريق تعيين قيمة سمة الحجم. على سبيل المثال ، لزيادة حجم الخط بخطوة واحدة ، يمكنك استخدام القيمة "4" ، وتقليلها - "2". هنا مثال على التعليمات البرمجية: | |
| هذا النص له حجم خط كبير | هذا النص له حجم خط أصغر |
إذا كنت تفضل استخدام كس ، يمكنك استخدام خاصية حجم الخط. على سبيل المثال ، لتعيين حجم الخط إلى 20 بكسل ، يمكنك استخدام التعليمات البرمجية التالية: