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