خط CSS (الخطوط)

قواعد CSS (RULES)

خصائص الخط في CSS تسمح لك بتعيين أنواع مختلفة من الأساليب للخطوط، مثل اسم عائلة الخط، حجم الخط، والثقلة، والمزيد.

خصائص الخطfont-family،font-style،font-variant،font-weightوfont-sizeفي CSS، يتم استخدام خصائص الخط للنص، مثل

القادم سيعرض تدريجيًا هذه الخصائص.

خصائص CSS تسمح لك بتعيين اسم عائلة الخط للنص، قائمة بالأولويات المستخدمة للخطوط.font-familyعائلة الخط

خصائص CSS تسمح لك بتعيين اسم عائلة الخط للنص، قائمة بالأولويات المستخدمة للخطوط.font-familyيمكن أن يحتوي الخصائص على عدة أسماء للخطوط كـالبديلالخط. أولاً، قم بتحديد الخط الذي تريده، ثم قم بتحديد جميع الخطوط (إذا لم تكن متاحة). إذا لم يدعم المتصفح الخط الأول، سيحاول الخط التالي. يمكن أن تكون إعلان عائلة الخط كما يلي:

p　{
　　　　font-family: "Times New Roman", Times, serif;
}

للحصول على معلومات إضافية حول التركيبات الشائعة للخطوط، يرجى التحقق من الخطوط الآمنة للشبكة.

نمط الخط

من خلالfont-styleيحدد هذا الخصائص النمط المستخدم في النص الموجود في العنصر.

القيم المحتملة لهذا الخصائص هي:normal،italicأومائل。

p.one {
　　　　font-style: normal;
}
p.two {
　　　　font-style: italic;
}
p.three {
　　　　font-style: oblique;
}

حجم الخط

font-sizeيحدد هذا الخصائص حجم النص الموجود في العنصر.

هناك عدة طرق يمكن استخدامها لتحديد حجم الخط، مثل استخدام الكلمات المفتاحية، البكسل أو الإمز.

استخدام الكلمات المفتاحية لتحديد حجم الخط

من خلال تعيين حجم الخط الكلمات المفتاحية في عنصر الجسم، يمكنك تعيين حجم النص بشكل مطلق في أي مكان آخر في الصفحة، مما يسمح لك بتكبير النص بشكل بسيط في جميع أنحاء الصفحة. يمكنك تحديد حجم مطلق باستخدام أحد الكلمات المفتاحية التالية:xx-small،x-small،small،medium،large،x-large،xx-large。

حجم النص المطلق يتم تحديده باستخدام أحد الكلمات المفتاحية التالية:smaller،،larger。

body　{
　　　　font-size: large;
}
h1 {
　　　　font-size: larger;
}
p　{
　　　　font-size: smaller;
}

تعيين حجم الخط باستخدام البكسل

عند الحاجة إلى دقة البكسل، فإن تعيين حجم الخط باستخدام قيمة البكسل (مثل 12px، 16px وما إلى ذلك) هو خيار جيد. ولكن، قد يختلف النتيجة من متصفح إلى آخر، لأنها تستخدم خوارزميات مختلفة لتحقيق تأثير مشابه.

h1 {
　　　　font-size: 24px;
}
p　{
　　　　font-size: 14px;
}

يمكن تعريف حجم الخط باستخدام حجم الخط بالبكسل، ولكن هذا الأسلوب ليس مرناً جدًا، لأن المستخدمين لا يمكنهم تغيير حجم الخط عبر إعدادات المتصفح. على سبيل المثال، قد يرغب المستخدمون ذوو الرؤية ضعيفة في زيادة حجم الخط إلى ما يزيد عن الحجم الذي قمت بتحديده. لذلك، يجب تجنب استخدام القيم البكسلية لتحديد حجم الخط إذا كنت ترغب في إنشاء تصميم.

تعيين حجم الخط باستخدام Em

وحدة emالوحدة تعني حجم الخط للعنصر الأم.

وحدة emحجم القيمة هو ديناميكي. تعريفfont-sizeعند تعيين حجم الخط باستخدام وحدة emيكون يساوي حجم الخط الذي تطبقه على العنصر الأم.

إذاfont-sizeإذا قمت بإعداد حجم النص a في عنصر الجسم إلى 20px، فإن1em = 20pxو2em = 40px。

إذا لم تكن قد قمت بإعداد حجم الخط في أي مكان في الصفحة، فإنه يكون حجم الخط الافتراضي للتصفح، وهو 16px. لذلك، الافتراضي هو1em = 16pxو2em = 32px。

h1 {
　　　　font-size: 2em; /* 32px/16px = 2em */
}
p　{
　　　　font-size: 0.875em; /* 14px/16px = 0.875em */
}

استخدام خليط من النسب المئوية والوحدات Em

حلول مشابهة يمكن تنفيذها في جميع المتصفحات هيfont-sizeإحدى التقنيات الشائعة لتحقيق تأثير مشابه في جميع المتصفحات هيfont-sizeتعيين إعدادات الجسم62.5%الذي يعني 62.5% من 16px أو 0.625em.

الآن، يمكنك تعيينfont-sizeمن خلال استخدام أي عنصر باستخدام وحدة EM، يتم تحقيق تحويل سهل التذكر،pxمن خلال القيمة 10 بهذه الطريقة10px=1em،12px=1.2em،14px=1.4em،16px=1.6em، وما إلى ذلك. راجع الأمثلة التالية:

body　{
　　　　font-size:　62.5%;　　　　/*　font-size　1em　=　10px　*/
}
p　{
　　　　font-size:　1.6em;　　　　/*　1.6em　=　16px　*/
}

سمك الخط

font-weightالخصائص تحدد سمك الخط أو الكتلة.

القيم المحتملة لخصائص font-style هي:normal،bold،bolder،lighter،100،200،300،400،500،600،700،800،900وinherit。

• العدد100- 900تحديد سمك الخط للخط، حيث يمثل كل رقم درجة الظلامية مقارنة بمقدمة.400معnormal＆700مثلbold。

• منbolderوlighter، بينما القيم الأخرى هي قيم وزن الخط المطلقة هي نسبية إلى الخط الموروث.

p　{
　　　　font-weight:　bold;
}

بسبب أن معظم الخطوط يمكن استخدامها فقط بوزن محدود. عادة، يتم استخدامعاديوعرض غامقإذا لم تكن الخط متاحًا في الوزن المحدد، سيتم اختيار خط بديل هو أقرب وزن متاح.

نوع الخط

font-variantالخصائص تسمح بعرض النص بأشكال حروف كبيرة خاصة.

حروف صغيرة وكبيرة أوحروف صغيرة وكبيرةمختلفة قليلاً عن الأحرف الكبيرة العادية، حيث تظهر الأحرف الصغيرة كنسخة أصغر من الأحرف الكبيرة العادية.

font-variantقيمة الخاصية قد تكونnormal،small-capsوinherit。

p　{
　　　　font-variant:　small-caps;
}