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