الخطوط هي أحد المكونات الرئيسية لصفحة الويب , وتحديد نوع الخط والحجم المناسب محوري في تجربة المستخدم وفيصل في بقاءه في الموقع
كيف يستخدم الخط في صفحة الويب ؟
أول شئ يكون بإستدعاء الخط نفسه بأن تكتب اسم الخط أو ما يسمى بعائلة الخط
على عنصر الصفحة الأساسي [[body]] ليكون هو الخط العام في
القالب , أو إن كنت ستخصص الخط لعنصر معين تضيفه على العنصر والطريقة كالتالي
body {
font-family: Tahoma, sans-serif;
}
والسبب في التسمية بعائلة الخط أنك تضيف أكثر من خط فيها الغالب خطين , والسبب إن لم يتم التعرف أو ايجاد الخط الأول يتم استدعاء الخط التالي بحيث لا تتوقف الصفحة عن العمل أو يحدث بها تشوفه في قراءة الخطوط والخط الثاني دائماً يكون من الخطوط الآمنة.
أنواع الخطوط
ليس كل خط يمكنك تحميله على الإنترنت هو خط مناسب للويب أى مناسب للإستخدام على موقع الكتروني , يجب أن يكون الخط مرخص له العمل على الويب وتستطيع محركات البحث معالجته بالتالي هناك خطوط معينة خاصة بالويب .
الخطوط الآمنة
هي مجموعة خطوط معتمدة من كل المتصفحات ستعمل معك لا تحتاج ملفات خارجية ولا تسبب ثقل في الموقع وهذا جدول بتلك الخطوط واسمها في العائلة
| اسم الخط | اسمه في كود CSS |
|---|---|
| Arial | Arial, sans-serif |
| Verdana | Verdana, sans-serif |
| Tahoma | Tahoma, sans-serif |
| Trebuchet MS | 'Trebuchet MS', sans-serif |
| Georgia | Georgia, serif |
| Times New Roman | 'Times New Roman', serif |
| Palatino | Palatino, serif |
| Courier New | 'Courier New', monospace |
| Lucida Console | 'Lucida Console', monospace |
الخطوط الخارجية
وهذه الخطوط التي تحتاج إضافة ملفاتها كاملة لصفحة الويب وهي خطوط أكثر جمالاً لكنها تعتبر أبطأ من الخطوط الآمنة وكذلك كونها تعتمد على ملفات خارجية إن توقفت تلك الإستضافات عن العمل سيتوقف الخط
لذلك وبما انك نك مستخدم لبلوجر ولا تملك استضافتك الخاصة فالإعتماد يكون على الخطوط التي تقدمها جوجل في خدمة Google Fonts
هذه الخدمة تعطيك مجموعة من الخطوط الجيدة والمعتمدة وكذلك المستضافة على جوجل فهي تقارب الخطوط الآمنة في طريقة عملها , تظل الخطوط الآمنة أسرع لكن فارق السرعة أقل من جودة الشكل وتجربة المستخدم الجيدة التي تضيفها تلك الخطوط ولذلك غالبية المواقع تعتمدها
كيف تضيف خط خارجي ؟
تضاف الخطوط الخارجية في صفحة الويب بطريقتين وكليهما طرق الإضافة العادية
لملفات الـ CSS كما ذكرنا في
موضوع سابق
الإستدعاء عبر وسم [[link]]
الخطوط هي ملفات CSS خارجية بإستدعاء الملف عبر كود HTML بين الوسم
[[<head>]]
وهذا مثال لإستدعاء أحد الخطوط من Google Fonts
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
الإستدعاء عبر خاصة [[@import]]
وهو كود CSS عادي يضاف بين وسمين
[[<style>]] أو فوق الوسم
[[]]></b:skin>]] في بلوجر
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
</style>
الفرق الأساسي بين الأمرين هو طريقة التحميل , عبر وسم [[link]] الخط سيتم تحميله
أولاً فله أولولية , أما عبر خاصية [[@import]] سيتم تحميل ملفات الصفحة أولاً
فهي تجعل تحميل الصفحة وظهورها أولى من ظهور الخط ثم يتم تحميل الخط
الأفضل أن تستخدم [[link]] فهي الخاصية المصنفه كممارسة
أفضل من جهة الويب .
@font-face
هذا الجزء هو طريقة تخصيص أكثر من أنه طريقة إضافة هو كود CSS أيضاً مثل
[[@import]] لكنه لا يحمل الخط كاملاً بكل أشكاله بل يحمل فقط ستايل معين يعني
مثلاً لو الخط يدعم عدة لغات في شكله أنت تحمل شكل واحد فقط
هذا يعتبر أسرع لكنك لن تستطيع تغيير تنسيقات الخط ولن يكون معروض على كل اللغات بشكله المدعوم مثال لنفس الخط الذي أضفناه لكن فقط الخط العربي العادي
<style>
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 300 900;
src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nErXyw1W3fxIlGzg.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
</style>
خصائص الخط الأساسية
سمك الخط [[font-weight]]
لجعل الخط سميك يمكن كتابة bold أو رقم 700
لجعل الخط عادي normal أو 400
حجم الخط [[font-size]]
تتحكم بحجم الخط بوحدات CSS
تباعد الخط [[line-height]]
تستخدم به أيضاً وحدات CSS وهو يكون الفرق بين سطر وآخر في نفس الفقرة يعني لو كتبت فقرة وانقسمت الى سطرين في الصفحة بسبب الطول من خلال هذا تحدد مدى تلاصق الأسط تزيده أو تقلله.
كيفية تطبيق كل ما سبق في كود
body {
font-weight:bold;
font-size:20px;
line-height:1.5em;
font-family: 'Roboto', sans-serif;
}
النظام المختصر من نفس الكود نفس الخصائص لكن في كود واحد مختصر , عادة نلجأ للكود المختصر فقط عندما نضيف عائلة الخط , لكن طالما العائلة مضافة مثلاً في العنصر الأساسي والتغيير سيكون مثلاً على الحجم فقط في عنصر فرعي أو السمك فنستخدم الكود المخصص له منفرداً
body {
font: bold 20px/1.5em 'Roboto', sans-serif;
}
ما ذكرناه ليس كل الخصائص المتاحة للخطوط , لكن هي الخصائص التي ستتعامل معها كثيراً .
تعليقات