بالإضافة إلى الخلفيات والألوان ذات المظهر الجيد، تعد إعدادات الخطوط أيضًا جزءًا مهمًا من تصميم الويب. لن تجعل الخطوط المناسبة الصفحة أكثر جمالًا فحسب، بل ستحسن أيضًا تجربة المستخدم. يوفر CSS سلسلة من الخصائص لتعيين أنماط خطوط النص، مثل تغيير الخطوط والتحكم في حجم الخط وسمكه وما إلى ذلك.
من خلال تعلم خصائص CSS المذكورة أعلاه، يمكننا تعيين الخط والحجم والنمط والمائل والغامق وما إلى ذلك للنص في HTML.
1. عائلة الخطوط
يتم استخدام سمة عائلة الخط لتعيين خط العنصر. الخط هو Song وKai وما إلى ذلك.
من خلال سمة عائلة الخطوط، يمكن الإعلان عن خطوط متعددة في نفس الوقت، ويتم فصل الخطوط بفواصل. وفقًا لمبدأ استدعاء الخط، سيتم استدعاء الخط الأول أولاً، وإذا لم يتم العثور عليه، فستتم تجربة الخط التالي، وإذا لم يتم العثور على أي منهما، فسيتم استدعاء الخط الافتراضي.
مثال:
على سبيل المثال، قم بتعيين الخط للنص في العلامة <p> التالية:
<p>برمجة dotcpp</p>
يمكنك استخدام محدد العلامات ثم تعيينه في سمة عائلة الخط:
p{font-family:'TimesNewRoman','sans-serif',宋体,楷体;}عند التصريح عن الخطوط يجب أن نعلن عن الخطوط الإنجليزية والخطوط الصينية بشكل منفصل، ويجب أن يكون إعلان الخطوط الإنجليزية قبل الخطوط الصينية. لأن معظم الخطوط الصينية تحتوي على حروف إنجليزية ولكنها ليست جميلة جدًا، بينما الخطوط الإنجليزية لا تحتوي على أحرف صينية. لذا، إذا لم نرغب في استخدام الخطوط الصينية لعرض اللغة الإنجليزية، فيجب أن نتذكر الإعلان عن الخطوط الإنجليزية أولاً. سيتم استدعاء الشخص المعلن أولاً أولاً.
الخطوط الإنجليزية شائعة الاستخدام: Arial، Helvetica، Tahoma، Verdana، Lucida Grande، Georgia، إلخ.
الخطوط الصينية شائعة الاستخدام: SimSun، SimHei، Microsoft YaHei، FangSong، KaiTi، إلخ.
2.نمط الخط
نمط الخط يضبط نمط الخط يمكنك ضبط الخط على خط مائل أو مائل أو عادي. يتم تعريف الخطوط المائلة عادةً على أنها خط فردي ضمن عائلة الخطوط.
قيم السمات المشتركة لهذا الجنس هي كما يلي:
3. وزن الخط
تحدد سمة وزن الخط حجم الخط المستخدم في نص العنصر المعروض.
قيم الخصائص المشتركة لهذه الخاصية هي كما يلي:
4.حجم الخط
يتم استخدام سمة حجم الخط لتعيين حجم الخط. الوحدة المستخدمة بشكل شائع هي بكسل، وهي بكسل.
px هو اختصار لـ Pixel، وهي أصغر وحدة من الصور أو الرسومات الرقمية التي يمكن عرضها وتمثيلها على جهاز عرض رقمي. البكسل هو الوحدة المنطقية الأساسية في الرسومات الرقمية، ويسمى البكسل أيضًا بعنصر الصورة.
5. الخط المتغير
يمكن للسمة Font-variant تحويل الأحرف الإنجليزية الصغيرة في النص إلى أحرف كبيرة صغيرة (الأحرف الكبيرة المحولة مشابهة في الحجم للأحرف الصغيرة قبل التحويل، لذا يطلق عليها أحرف كبيرة صغيرة). القيم الاختيارية لسمة الخط المتغير هي كما يلي:
6. الخط
يتم استخدام سمة الخط لتعيين كافة سمات الخط في إعلان واحد، مع وجود مسافات تفصل بين كل سمة. أي أن السمة المختصرة الشاملة للسمات المذكورة أعلاه.
إذا استخدمنا سمة الخط لتعيين نمط الخط، فإن ترتيب الإعداد هو: نمط الخط، متغير الخط، وزن الخط، حجم الخط/ارتفاع الخط، عائلة الخط. ليس من الضروري تعيين أي من القيم، وستستخدم الخصائص غير المحددة قيمها الافتراضية.