خطوط CSS

تعرف على كيفية العمل مع الخطوط في CSS

في فجر الويب ، لم يكن لديك سوى عدد قليل من الخطوط التي يمكنك الاختيار من بينها.

لحسن الحظ ، يمكنك اليوم تحميل أي نوع من الخطوط على صفحاتك.

اكتسبت CSS العديد من القدرات الرائعة على مر السنين فيما يتعلق بالخطوط.

الfontالخاصية هي اختصار لعدد من الخصائص:

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size

دعونا نرى كل واحد منهم ثم نغطيfont.

ثم سنتحدث عن كيفية تحميل الخطوط المخصصة ، باستخدام@importأو@font-face، أو عن طريق تحميل ورقة أنماط الخط.

font-family

يضبط الخطالأسرةالتي سيستخدمها العنصر.

لماذا "الأسرة"؟ لأن ما نعرفه كخط يتكون في الواقع من عدة خطوط فرعية. التي توفر كل الاسلوب (جريء ، مائل ، خفيف ..) نحتاجه.

فيما يلي مثال من تطبيق Font Book الخاص بجهاز Mac - تستضيف عائلة خطوط Fira Code عدة خطوط مخصصة أسفلها:

تتيح لك هذه الخاصية تحديد خط معين ، على سبيل المثال:

body {
  font-family: Helvetica;
}

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

body {
  font-family: Helvetica, Arial;
}

لقد استخدمت بعض الخطوط المحددة حتى الآن ، تلك التي نسميهاخطوط الويب الآمنة، حيث تم تثبيتها مسبقًا على أنظمة تشغيل مختلفة.

نقسمها بخطوط Serif و Sans-Serif و Monospace. فيما يلي قائمة ببعض أشهرها:

سيريف- جورجيا - بالاتينو - تايمز نيو رومان - تايمز

بلا الرقيق- Arial - Helvetica - Verdana - جنيف - Tahoma - Lucida Grande - Impact - Trebuchet MS - Arial Black

مونوسبيس- بريد سريع جديد - ساعي - وحدة تحكم Lucida - موناكو

يمكنك استخدام كل هؤلاء كـfont-familyالخصائص ، ولكن لا يمكن ضمان وجودها في كل نظام. يوجد آخرون أيضًا بمستوى متفاوت من الدعم.

يمكنك أيضًا استخدام الأسماء العامة:

  • sans-serifخط بدون حروف مركبة
  • serifخط مع وصلات
  • monospaceخط جيد بشكل خاص للكود
  • cursiveتستخدم لمحاكاة القطع المكتوبة بخط اليد
  • fantasyاسم يقول كل شيء

يتم استخدام هذه عادةً في نهاية ملفfont-familyالتعريف ، لتوفير قيمة احتياطية في حالة عدم إمكانية تطبيق أي شيء آخر:

body {
  font-family: Helvetica, Arial, sans-serif;
}

font-weight

تحدد هذه الخاصية عرض الخط. يمكنك استخدام تلك القيم المحددة مسبقًا:

  • عادي
  • بالخط العريض
  • أكثر جرأة (بالنسبة للعنصر الأصل)
  • أفتح (بالنسبة للعنصر الأصل)

أو باستخدام الكلمات الأساسية الرقمية

  • 100
  • 200
  • 300
  • 400 ، مخطط لـnormal
  • 500
  • 600
  • 700 معين لbold
  • 800
  • 900

حيث 100 هو الخط الأخف ، و 900 هو الخط الأكثر جرأة.

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

font-stretch

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

هذا مهم: يجب أن يكون الخط مجهزًا بأوجه مختلفة.

القيم المسموح بها هي من الأضيق إلى الأوسع:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

font-style

يسمح لك بتطبيق نمط مائل على خط:

p {
  font-style: italic;
}

تسمح هذه الخاصية أيضًا بالقيمobliqueوnormal. هناك فرق ضئيل للغاية ، إن وجد ، بين استخدامitalicوoblique. الأول أسهل بالنسبة لي ، لأن HTML تقدم بالفعل ملفiعنصر مما يعني مائل.

font-size

تستخدم هذه الخاصية لتحديد حجم الخطوط.

يمكنك تمرير نوعين من القيم:

  1. قيمة طول مثلpxوemوremإلخ ، أو نسبة مئوية
  2. كلمة أساسية ذات قيمة محددة مسبقًا

في الحالة الثانية ، القيم التي يمكنك استخدامها هي:

  • xx- صغير
  • x- صغير
  • صغير
  • واسطة
  • كبير
  • x-كبير
  • xx- كبير
  • أصغر (بالنسبة للعنصر الأصل)
  • أكبر (بالنسبة للعنصر الأصل)

استعمال:

p {
  font-size: 20px;
}

li {
font-size: medium;
}

font-variant

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

  • normal
  • inherit
  • small-caps

الأحرف الكبيرة الصغيرة تعني أن النص يتم عرضه "بأحرف كبيرة صغيرة" بجانب الأحرف الكبيرة.

font

الfontتتيح لك الخاصية تطبيق خصائص خط مختلفة في واحد ، مما يقلل من الفوضى.

يجب علينا تعيين خاصيتين على الأقل ،font-sizeوfont-family، والبعض الآخر اختياري:

body {
  font: 20px Helvetica;
}

إذا أضفنا خصائص أخرى ، فيجب وضعها بالترتيب الصحيح.

هذا هو الترتيب:

font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

مثال:

body {
  font: italic bold 20px Helvetica;
}

section {
font: small-caps bold 20px Helvetica;
}

تحميل الخطوط المخصصة باستخدام@font-face

@font-faceيتيح لك إضافة اسم عائلة خط جديد ، وتعيينه إلى ملف يحتوي على خط.

سيتم تنزيل هذا الخط بواسطة المتصفح واستخدامه في الصفحة ، وقد كان بمثابة تغيير أساسي للطباعة على الويب - يمكننا الآن استخدام أي خط نريده.

يمكننا أن نضيف@font-faceالإعلانات مباشرة في CSS الخاص بنا ، أو رابط إلى CSS مخصص لاستيراد الخط.

في ملف CSS الخاص بنا ، يمكننا أيضًا استخدام@importلتحميل ملف CSS هذا.

أ@font-faceيحتوي الإعلان على العديد من الخصائص التي نستخدمها لتحديد الخط ، بما في ذلكsrc، URI (واحد أو أكثر من URIs) للخط. يتبع هذا سياسة نفس الأصل ، مما يعني أنه لا يمكن تنزيل الخطوط إلا من الأصل الحالي (المجال + المنفذ + البروتوكول).

عادة ما تكون الخطوط بالتنسيقات

  • woff(تنسيق خط الويب المفتوح)
  • woff2(تنسيق خط الويب المفتوح 2.0)
  • eot(نوع مفتوح مضمن)
  • otf(خط OpenType)
  • ttf(خط TrueType)

تسمح لنا الخصائص التالية بتحديد خصائص الخط الذي سنقوم بتحميله ، كما رأينا أعلاه:

  • font-family
  • font-weight
  • font-style
  • font-stretch

ملاحظة على الأداء

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

تحميل مجانيكتيب CSS


المزيد من دروس css:


Tech Wiki على الإنترنت!