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