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