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