خطوط CSS

CSS خواص الخط تعريف سلسلة الخط، حجم، سميك، نمط (مثل مائل) و تشوه (مثل الحروف الصغيرة الكبيرة).

سلسلة CSS

في CSS، هناك نوعان من أسماء خطوط الخطوط:

  • الخطوط العامة - مجموعة من أنظمة الخطوط التي تحتوي على مظهر مشابه (مثل "Serif" أو "Monospace")
  • الخطوط المحددة - الخطوط المحددة (مثل "Times" أو "Courier")

إضافة إلى جميع الخطوط المحددة المختلفة، تعريف CSS خمس خطوط عامة:

  • خطوط Serif
  • خطوط sans-serif
  • خطويات متماثلة
  • خطويات كتابية
  • خطويات خيالية

إذا كنت بحاجة إلى مزيد من المعلومات حول عائلة الخطوط، يرجى قراءة سلسلة CSS.

تحديد الخطوط

استخدام خاصية font-family تحديد عائلة الخطوط النصية.

استخدام الخطوط العامة

إذا كنت ترغب في استخدام خط sans-serif للوثيقة، ولكن لا تهتم ببعض الخطوط، فإن هذا هو الإعلان المناسب:

body {font-family: sans-serif;}

亲自试一试

سيقوم الوكيل المستخدم بتحديد خط من عائلة الخطوط sans-serif (مثل Helvetica) وتطبيقه على عنصر body، بسبب الوراثة، سيتم تطبيق هذا اختيار الخط أيضًا على جميع العناصر الموجودة داخل عنصر body، ما لم يكن هناك اختيار أكثر تحديدًا يغطيها.

تحديد الخطوط

إضافة إلى استخدام الخطوط العامة، يمكنك أيضًا تعيين خطوط أكثر تحديدًا باستخدام خاصية font-family.

في المثال التالي، تم تعيين خط Georgia لجميع العناصر h1:

h1 {font-family: Georgia;}

亲自试一试

قد يسبب هذا القاعدة أيضًا مشكلة أخرى، إذا لم يتم تثبيت خط Georgia على الوكيل المستخدم، يمكن فقط استخدام الخط الافتراضي للوكيل لعرض العنصر h1.

يمكننا حل هذه المشكلة من خلال دمج اسم الخط المحدد وسلسلة الخطوط العامة:

h1 {font-family: Georgia, serif;}

亲自试一试

إذا لم يتم تثبيت Georgia من قبل القارئ، ولكن تم تثبيت Times الخط (خط من خطوط العائلة serif)، قد يستخدم الوكيل المستخدم Times للعناصر h1. على الرغم من أن Times لا يتطابق مع Georgia تمامًا، إلا أنه يكفي.

لذلك، نوصي بتوفير سلسلة من الخطوط العامة في جميع قواعد font-family. بهذا الشكل، يتم تقديم خيار احتياطي، حيث لا يمكن للوكلاء المستخدمين تقديم الخط المحدد الذي يتطابق مع القاعدة، يمكن اختيار خط مرشح.

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

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

亲自试一试

بناءً على هذه القائمة، سيبحث وكيل المستخدم بناءً على الترتيب المحدد عن هذه الخطوط. إذا لم تكن جميع الخطوط المذكورة متاحة، سيتم ببساطة اختيار خط serif المتاح.

استخدام الأقواس

ربما لاحظت أن العينة السابقة استخدمت الأقواس المثلثة. يجب استخدام الأقواس المزدوجة أو المثلثة فقط عندما يحتوي اسم الخط على مسافات (مثل New York) أو إذا كان يحتوي على رموز مثل # أو $.

يمكن استخدام الأقواس المزدوجة أو المثلثة. ولكن إذا تم وضع خاصية font-family داخل خاصية style في HTML، فإنه يجب استخدام نوع الأقواس الذي لم يستخدم في الخاصية نفسها:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

亲自试一试

نمط الخط

خصائص font-styleيستخدم غالبًا لتعيين النص المائل.

لهذه الخاصية ثلاثة قيم:

  • normal - عرض النص العادي
  • italic - عرض النص المائل
  • oblique - عرض النص المنحرف

实例

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

亲自试一试

الفرق بين italic و oblique

font-style بسيط جدًا: يستخدم لاختيار النص العادي، النص المائل والنص المنحرف.

الخط المائل هو نمط خط بسيط، يتم تعديل بنية كل حرف قليلاً لتعكس الظهور المختلف.

في معظم الحالات، تبدو النصوص المائلية والمنحرفة في متصفحات الويب متشابهة.

تغيير الخط

خصائص font-variantيمكن تعيين الخط الكبير الحرفي.

الخط الكبير الحرفي ليس خط كبير عاديًا ولا هو خط صغير، بل يستخدم خطوط كبيرة الحجم المختلفة.

实例

p {font-variant:small-caps;}

亲自试一试

تضخيم الخط

خصائص font-weightضبط سمك النص.

استخدام الكلمة المفتاحية bold لضبط النص إلى حجم عريض.

الكلمات المفتاحية 100 ~ 900 تحدد 9 مستويات من تضخيم الخط. إذا كان هناك مستوى تضخيم مدمج في الخط، فإن هذه الأرقام ت映射 مباشرة إلى المستويات المسبقة، حيث يُعتبر 100 أرقامًا أرقًا، و900 أرقامًا أرقًا. الرقم 400 يساوي normal، والرقم 700 يساوي bold.

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

实例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

亲自试一试

حجم الخط

خصائص font-sizeضبط حجم النص.

قدرة إدارة حجم النص مهمة جدًا في مجال تصميم الويب، ولكن لا يجب أن تجعل الفقرات تبدو مثل العناوين أو العناوين تبدو مثل الفقرات.

يُرجى دائمًا استخدام العناوين HTML الصحيحة، مثل استخدام <h1> - <h6> لتحديد العناوين، واستخدام <p> لتحديد الفقرات.

قيمة font-size يمكن أن تكون قيمة مطلقة أو نسبية.

القيمة المطلقة:

  • ضبط حجم النص إلى حجم معين
  • عدم السماح للمستخدمين بتغيير حجم النص في جميع المتصفحات (غير مفيد للإمكانية الاستخدام)
  • الحجم المطلق مفيد جدًا عند تحديد حجم الناتج الفيزيائي

الحجم النسبي:

  • ضبط الحجم بالنسبة للعناصر المحيطة
  • إتاحة إمكانية تغيير حجم النص من قبل المستخدم في المتصفح

ملاحظة:إذا لم تكن قد قمت بتحديد حجم الخط، فإن حجم النص العادي (مثل الفقرات) هو 16 pixel (16px = 1em).

استخدام pixels لضبط حجم الخط

باستخدام pixels لضبط حجم النص، يمكنك التحكم في حجم النص بشكل كامل:

实例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

亲自试一试

في Firefox، Chrome و Safari، يمكن تعديل حجم النص في الأمثلة السابقة، ولكن لا يمكن في Internet Explorer.

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

استخدام em لضبط حجم الخط

إذا كان من الممكن تجنب مشكلة عدم تعديل النص في متصفح Internet Explorer، يستخدم العديد من المطورين وحدة em بدلاً من pixels.

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

实例

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

亲自试一试

在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

实例

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

亲自试一试

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

CSS 字体实例：

设置文本的字体
本例演示如何设置文本字体。
设置字体尺寸
本例演示如何设置字体尺寸。
设置字体风格
本例演示如何设置字体风格。
设置字体的异体
本例演示如何设置字体的异体。
设置字体的粗细
本例演示如何设置字体的粗细。
所有字体属性在一个声明之内
本例演示如何使用简写属性将字体属性设置在一个声明之内。

CSS 字体属性

属性 描述
font 属性的简写。作用是将所有针对字体的属性设置在一个声明中。
font-family إعداد سلسلة الخطوط.
font-size إعداد حجم الخط.
font-size-adjust توسيع الخط البديل الذكي عند عدم توفر الخط المفضل. (تم حذف هذه الخاصية في CSS2.1.)
font-stretch تمدد الخط الأفقي. (تم حذف هذه الخاصية في CSS2.1.)
font-style إعداد نمط الخط.
font-variant عرض النص بأحرف صغيرة كبيرة أو خط عادي.
font-weight إعداد سمك الخط.