يلعب الخط دورا مهما في تصميم النص على صفحة الويب. يمكنه التعبير عن أسلوب ومزاج المحتوى ، وجذب انتباه القارئ وجعل النص أكثر قابلية للقراءة. هناك عدة طرق لتغيير الخط في هتمل ، والذي يسمح لمطوري الويب لإنشاء صفحات ويب فريدة وجميلة. في هذا الدليل ، سنلقي نظرة على العديد من الطرق التي تسمح لك بتغيير الخط باستخدام علامات وسمات مختلفة.
1. علامات قوية و م
وتستخدم علامات قوية و إم في هتمل لتسليط الضوء على النص وإعطائها معنى الدلالي. مثل معظم العلامات في هتمل ، يمكنهم أيضا تغيير الخط. عادة ما تستخدم العلامة القوية لتسليط الضوء على المعلومات المهمة ، بينما تستخدم علامة إم ، على العكس من ذلك ، لتسليط الضوء على النص مع التلوين العاطفي.
على سبيل المثال ، يمكنك استخدام كس لتغيير خط النص المحدد باستخدام علامات قوية أو إم.
2. سمات العلامة
في هتمل ، قد تحتوي بعض العلامات على سمات تسمح لك بتخصيص الخط. على سبيل المثال ، تحتوي علامة الخط على سمات الحجم واللون والوجه ، والتي تسمح لك بتعيين حجم الخط ولونه ونوعه ، على التوالي.
على سبيل المثال ، هذا نص بخط أريال أحمر وحجم 4
3. أنماط المغلق
الطريقة الأكثر مرونة وشائعة لتغيير الخط في هتمل هو استخدام كس. تسمح لك أنماط كس بالتحكم في الخط والحجم واللون والسمات الأخرى للنص. للقيام بذلك ، يمكنك استخدام علامة النمط أو سمة النمط للعلامة أو ملف كس خارجي.
على سبيل المثال,
في هذا الدليل ، نظرنا في عدة طرق لتغيير الخط باستخدام هتمل. كل من الطرق المقدمة لها خصائصها وتطبيقها. يعتمد اختيار طريقة معينة على متطلبات واحتياجات مشروعك. قم بالاختيار بناء على سهولة الاستخدام ودعم المتصفح والتوافق مع التقنيات الأخرى.
- المبادئ الأساسية لتغيير الخط في هتمل
- استخدام علامة لتغيير الخط
- استخدام أنماط كس لتغيير الخط
- تغيير الخط باستخدام علامة
- كيفية استخدام علامة لتغيير حجم الخط
المبادئ الأساسية لتغيير الخط في هتمل
هناك عدة طرق لتغيير خط النص في هتمل:
- استخدام العلامة: يمكنك استخدام هذه العلامة لتحديد حجم الخط ولونه.
- باستخدام أنماط كس المضمنة: باستخدام أنماط كس ، يمكنك تغيير خط النص ، بما في ذلك حجمه ولونه ونمطه وسمكه.
- استخدام ملف كس المكون الإضافي: يساعد إنشاء ملف نمط كس منفصل على إدارة مظهر النص مركزيا على موقع الويب بأكمله أو على صفحات فردية.
تتيح لك خيارات تعديل الخط إضافة نمط وجمال إلى النص على صفحة الويب ، مما يمكن أن يحسن إدراك المعلومات وتجربة المستخدم.
استخدام علامة لتغيير الخط
لتغيير الخط ، تحتاج إلى استخدام سمة" الوجه". على سبيل المثال ، لاستخدام الخط أريال ، تحتاج إلى إضافة سمة الوجه مع قيمة "أريال":
| مثال | النتيجة |
|---|---|
هذا النص بخط أريال | هذا النص بخط أريال |
تسمح لك العلامة أيضا بتغيير حجم الخط باستخدام سمة" الحجم". يمكن أن تكون قيمة سمة "الحجم" من 1 إلى 7 ، وكلما زادت القيمة ، زاد حجم الخط:
| مثال | النتيجة |
|---|---|
هذا النص هو مع حجم الخط من 5 | هذا النص هو مع حجم الخط من 5 |
يمكنك أيضا استخدام العلامة لتغيير لون النص. يتم استخدام سمة" اللون " لهذا الغرض. يمكن أن تكون قيمة سمة "اللون" هي اسم اللون باللغة الإنجليزية (على سبيل المثال ، "أحمر" أحمر) أو رمز لون سداسي عشري:
| مثال | النتيجة |
|---|---|
هذا النص باللون الأزرق | هذا النص باللون الأزرق |
هذا النص باللون الأحمر | هذا النص باللون الأحمر |
يعد استخدام علامة لتغيير الخط أحد أسهل الطرق لإضافة نمط إلى نص على صفحة الويب. ومع ذلك ، في هتمل الحديثة ، تعتبر هذه العلامة عفا عليها الزمن ، ويوصى باستخدام كس لتغيير أنماط النص.
استخدام أنماط كس لتغيير الخط
تلعب الخطوط دورا مهما في تصميم صفحة الويب. أنها تساعد على نقل المزاج الصحيح وجعل النص أكثر قابلية للقراءة. باستخدام أنماط كس في هتمل ، يمكنك بسهولة تغيير خط النص.
يمكنك استخدام العديد من خصائص كس لتغيير الخط:
عائلة الخط: باستخدام هذه الخاصية ، يمكنك تحديد أسماء الخطوط التي سيتم تطبيقها على النص. إذا لم يكن الخط الأول المحدد متاحا على جهاز المستخدم ، فسيقوم المتصفح تلقائيا باستبداله بالخط التالي المحدد في القائمة. على سبيل المثال:
ص {
الخط الأسرة: أريال ، بلا الرقيق;
}
حجم الخط: يمكنك استخدام هذه الخاصية لتغيير حجم الخط. يمكن تحديد الحجم في وحدات قياس مختلفة ، على سبيل المثال ، بكسل (بكسل) ، النسب المئوية ( ٪ ) أو م (م). على سبيل المثال:
ص {
حجم الخط: 16 بكسل;
}
نمط الخط: يمكنك استخدام هذه الخاصية لتغيير نمط الخط. قيمة مائل مائل ، مائل مائل. على سبيل المثال:
ص {
نمط الخط: مائل;
}
الخط الوزن: يمكنك استخدام هذه الخاصية لتغيير تشبع الخط. قيمة العادي هو التشبع العادي ، جريئة جريئة. على سبيل المثال:
ص {
وزن الخط: غامق;
}
مثال على استخدام أنماط كس لتغيير الخط:
مثال على نص بخط معدل.
في هذا المثال ، سيتم عرض جميع الفقرات على الصفحة بخط أريال ، بحجم 16 بكسل ، بخط مائل وخط غامق. يمكنك أيضا تغيير قيمة الخصائص وفقا لاحتياجاتك.
تغيير الخط باستخدام علامة
لتغيير الخط باستخدام علامة النمط ، يجب تحديده في سمة النمط للعنصر الذي تريد تغيير نصه. على سبيل المثال ، لتغيير خط النص داخل فقرة ، يمكنك استخدام التعليمات البرمجية التالية:
نموذج النص
في هذا المثال ، سيتم تعيين خط النص داخل الفقرة إلى أريال ، بلا الرقيق. يمكنك استخدام أي خط آخر بدلا من أريال. ومع ذلك ، لكي يعرض المتصفح النص بالخط المحدد ، يجب تثبيت الخط المحدد على كمبيوتر المستخدم.
بالإضافة إلى ذلك ، بالإضافة إلى خاصية عائلة الخط ، يمكنك استخدام علامة النمط لتعيين خصائص الخط الأخرى ، مثل الحجم والخط الغامق والمائل وما إلى ذلك. على سبيل المثال ، يمكنك استخدام خاصية حجم الخط لتغيير حجم الخط:
نموذج النص
في هذا المثال ، سيتم تعيين حجم خط النص داخل الفقرة على 16 بكسل. يمكنك استخدام أي قيمة بدلا من 16 بكسل.
يمكنك أيضا استخدام علامة النمط لتعيين أنماط نص أخرى ، مثل لون الخط والمحاذاة. على سبيل المثال ، يمكنك استخدام التعليمات البرمجية التالية لتغيير لون الخط:
نموذج النص
النص قبل تغيير حجم الخط النص بعد تغيير حجم الخط النص بعد تغيير حجم الخط
في هذا المثال ، استخدمنا سمة النمط وقمنا بتعيين قيمة خاصية حجم الخط على 24 بكسل. نتيجة لذلك ، سيتم عرض النص المرفق داخل العلامة بحجم خط أكبر بكثير.
يمكنك أيضا استخدام وحدات قياس أخرى لتحديد حجم الخط ، مثل النسب المئوية ( ٪ ) ، البيكسلات (بكسل) ، إم (إم) ، إلخ.
من المهم ملاحظة أن استخدام سمة النمط يسمح لك بتغيير حجم الخط فقط لقسم معين من النص داخل العنصر. إذا كنت تريد تغيير حجم الخط للنص بأكمله على الصفحة ، فيجب عليك استخدام كس أو تطبيق الأنماط على سمة الفئة أو المعرف.
هنا هو نموذج التعليمات البرمجية التي تظهر كيفية استخدام علامة مع سمة الفئة و كس لتغيير حجم الخط: