اختيار الخط المناسب لموقعك الإلكتروني مهم!
أهمية اختيار الخط:
- يؤثر اختيار الخط المناسب بشكل كبير على تجربة القراء للموقع.
- يمكن للخط المناسب أن يخلق هوية قوية لعلامتك التجارية.
- من المهم استخدام خط سهل القراءة. يضيف الخط قيمة لنصك. كما أنه من المهم اختيار لون وحجم نص صحيحين للخط.
عائلات الخطوط العامة:
هناك خمس عائلات خطوط عامة في CSS:
- خطوطセリフ: تتميز بخط صغير عند حواف كل حرف. تخلق إحساسًا بالرسمية والأناقة.
- خطوط غير مسطرة: لها خطوط نظيفة (لا توجد ضربات صغيرة متصلة). تخلق مظهرًا عصريًا وبسيطًا.
- خطوط المسافة الواحدة: هنا جميع الأحرف لها نفس العرض الثابت. تخلق مظهرًا ميكانيكيًا.
- خطوط الكتابة اليدوية: تحاكي خط اليد البشري.
- خطوط الخيال: خطوط مزخرفة / مرحة.
- تنتمي جميع أسماء الخطوط المختلفة إلى إحدى عائلات الخطوط العامة.
الفرق بين خطوط Serif و Sans-serif:
ملاحظة: تعتبر خطوط Sans-serif على شاشات الكمبيوتر أسهل في القراءة من خطوط Serif.
بعض أمثلة الخطوط:
| عائلة الخط العام | أمثلة على أسماء الخطوط |
|---|---|
| Serif | Times New Roman، Georgia، Garamond |
| Sans-serif | Arial، Verdana، Helvetica |
| Monospace | Courier New، Lucida Console، Monaco |
| Cursive | Brush Script MT، Lucida Handwriting |
| Fantasy | Copperplate، Papyrus |
خاصية font-family في CSS:
نستخدم في CSS خاصية font-family لتحديد خط النص.
ملاحظة: إذا كان اسم الخط أكثر من كلمة واحدة، فيجب أن يكون بين علامات اقتباس، مثل: “Times New Roman”.
نصيحة: يجب أن تحتوي خاصية font-family على عدة أسماء خطوط كنظام “احتياطي”، لضمان توافقية قصوى بين المتصفحات / أنظمة التشغيل. ابدأ بالخط الذي تريده، وانتهي بعائلة عامة (لتسمح للمتصفح باختيار خط مشابه في العائلة العامة، إذا لم تتوفر خطوط أخرى). يجب فصل أسماء الخطوط بفاصلة. اقرأ المزيد عن خطوط الاحتياطي في الفصل التالي.
مثال:
تحديد بعض الخطوط المختلفة لثلاث فقرات:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
خطوط آمنة للويب في CSS
ما هي خطوط آمنة للويب؟
هي خطوط متوفرة بشكل أساسي على جميع المتصفحات والأجهزة.
خطوط احتياطية:
لا يوجد أي خطوط آمنة للويب بنسبة 100%. هناك دائمًا احتمال عدم وجود خط ما أو عدم تثبيته بشكل صحيح.
لذلك، من المهم جدًا استخدام خطوط احتياطية دائمًا.
يعني هذا أنك يجب أن تضيف قائمة بـ “خطوط احتياطية” متشابهة في خاصية font-family. إذا لم يعمل الخط الأول، سيحاول المتصفح الخط التالي، ثم التالي، وهكذا. أنهِ القائمة دائمًا باسم عائلة خط عام.
مثال:
هنا، يوجد ثلاثة أنواع خطوط: Tahoma و Verdana و sans-serif. الخطان الثاني والثالث هما احتياطيان، في حالة عدم العثور على الأول.
p {
font-family: Tahoma, Verdana, sans-serif;
}
أفضل خطوط آمنة للويب في HTML و CSS
القائمة التالية تضم أفضل خطوط آمنة للويب في HTML و CSS:
- Arial (بدون مسطرة)
- Verdana (بدون مسطرة)
- Tahoma (بدون مسطرة)
- Trebuchet MS (بدون مسطرة)
- Times New Roman (بمسطرة)
- Georgia (بمسطرة)
- Garamond (بمسطرة)
- Courier New (مسافة ثابتة)
- Brush Script MT (خط اليدوى)
ملاحظة: قبل نشر موقعك الإلكتروني، تحقق دائمًا من كيفية ظهور خطوطك على متصفحات وأجهزة مختلفة، واستخدم دائمًا خطوط احتياطية!
Arial هو الخط الأكثر استخدامًا للوسائط المطبوعة والإلكترونية على حد سواء. كما أنه الخط الافتراضي في Google Docs.
يعتبر Arial واحدًا من أكثر الخطوط الآمنة للويب، وهو متاح على جميع أنظمة التشغيل الرئيسية.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Verdana هو خط شائع جدًا وسهل القراءة حتى عند الأحجام الصغيرة، مما يجعله خيارًا مفضلاً للتنسيقات التي تتطلب عرض نص واضح في مساحات محدودة، مثل شاشات الكمبيوتر أو الهواتف النقالة.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
خط Tahoma (بدون مسطرة)
يتميز خط Tahoma بوجود مسافة أقل بين الحروف مقارنة بخطوط أخرى مثل Arial.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Trebuchet MS : صممته Microsoft عام 1996. استخدمه بحذر، فهو غير مدعوم على جميع أنظمة تشغيل الهاتف المحمول.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Times New Roman (بمسطرة): من أشهر الخطوط عالميًا. يبدو احترافيًا ويستخدم في العديد من الصحف والمواقع الإخبارية. كما أنه الخط الأساسي لأجهزة وتطبيقات Windows.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Georgia (بمسطرة): خط أنيق وسهل القراءة بأحجام مختلفة، وبالتالي فهو خيار جيد لتصميم قابل للتجاوب مع الأجهزة المحموله.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Garamond (بمسطرة): خط كلاسيكي يستخدم في العديد من الكتب المطبوعة. يتميز بمظهر خالٍ من الزمن وقابلية قراءة جيدة.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Courier New (مسافة ثابتة): أكثر خطوط المسافة الثابتة شيوعًا. يستخدم كثيرًا مع شاشات الترميز، وتستخدمه العديد من خدمات البريد الإلكتروني كخط افتراضي. وهو أيضًا الخط القياسي لنصوص سيناريوهات الأفلام.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Brush Script MT (خط اليدوي): مصمم ليحاكي خط اليد. أنيق ومتطور، لكن قد يصعب قراءته. استخدمه بحذر.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>خطوط احتياطية شائعة في CSS
الخطوط الاحتياطية هي طريقة لضمان ظهور النص بشكل صحيح على جميع الأجهزة، حتى لو لم يكن الخط المفضل لديك متاحًا.
فيما يلي بعض الخطوط الاحتياطية الشائعة، مرتبة حسب عائلات الخطوط الخمسة العامة:
خطوط Serif:
- الخط الأساسي: Times New Roman
- الخط الاحتياطي 1: Georgia
- الخط الاحتياطي 2: Garamond
- مثال:
خطوط Sans-serif:
- الخط الأساسي: Arial
- الخط الاحتياطي 1: Verdana
- الخط الاحتياطي 2: Helvetica
- مثال:
خطوط Monospace:
- الخط الأساسي: Courier New
- الخط الاحتياطي 1: Lucida Console
- الخط الاحتياطي 2: Monaco
- مثال:
خطوط Cursive:
- الخط الأساسي: Brush Script MT
- الخط الاحتياطي 1: Lucida Handwriting
- مثال:
خطوط Fantasy:
- الخط الأساسي: Copperplate
- الخط الاحتياطي 1: Papyrus
- مثال:
نصائح لاستخدام الخطوط الاحتياطية:
- حدد خطًا احتياطيًا من نفس عائلة الخط الأساسي.
- تأكد من أن الخط الاحتياطي متاح على جميع الأجهزة.
- اختبر موقعك الإلكتروني على مجموعة متنوعة من الأجهزة للتأكد من ظهور النص بشكل صحيح.
ملاحظة: قد تختلف توافر الخطوط على مختلف الأجهزة. تأكد من التحقق من توافر الخطوط قبل استخدامها.
أنماط خطوط CSS
خاصية font-style:
تستخدم خاصية font-style بشكل أساسي لإمالة النص. تمتلك هذه الخاصية ثلاث قيم:
- normal: يعرض النص بشكل عادي.
- italic: يعرض النص مائلاً.
- oblique: يميل النص قليلاً (يشبه italic بدرجة كبيرة، لكن دعمه أقل).
مثال:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
خاصية font-weight:
تحدد خاصية font-weight ثقل الخط:
مثال:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
خاصية font-variant:
تحدد خاصية font-variant ما إذا كان سيتم عرض النص بحروف صغيرة مكبرة أم لا.
في خطوط الحروف الصغيرة المكبرة، يتم تحويل جميع الحروف الصغيرة إلى حروف كبيرة. ومع ذلك، تظهر الحروف الكبيرة المحولة بحجم خط أصغر من الحروف الكبيرة الأصلية في النص.
مثال:
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
حجم الخط في CSS
خاصية font-size:
تضبط خاصية font-size حجم النص. يعد التحكم في حجم النص أمرًا مهمًا في تصميم الويب. ومع ذلك، لا يجب استخدام إعدادات حجم الخط لجعل الفقرات تبدو وكأنها عناوين، أو العناوين تبدو وكأنها فقرات.
استخدم دائمًا علامات HTML المناسبة، مثل <h1> – <h6> للعناوين و <p> للفقرات.
يمكن أن تكون قيمة font-size بحجم مطلق أو نسبي.
الحجم المطلق:
- يضبط النص على حجم محدد
- لا يسمح للمستخدم بتغيير حجم النص في جميع المتصفحات (سيئ لأسباب إمكانية الوصول)
- يكون الحجم المطلق مفيدًا عندما يكون الحجم المادي للمخرجات معروفًا
الحجم النسبي:
- يضبط الحجم نسبة إلى العناصر المحيطة
- يسمح للمستخدم بتغيير حجم النص في المتصفحات
- ملاحظة: إذا لم تحدد حجم خط، فإن الحجم الافتراضي للنص العادي، مثل الفقرات، هو 16 بكسل (16 بكسل = 1em).
تعيين حجم الخط باستخدام وحدات البكسل:
يمنحك تعيين حجم النص باستخدام البكسلات تحكمًا كاملاً في حجم النص:
مثال:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}نصيحة: إذا استخدمت البكسلات، فلا يزال بإمكانك استخدام أداة التكبير لتغيير حجم الصفحة بأكملها.
تعيين حجم الخط باستخدام em:
للسماح للمستخدمين بتغيير حجم النص (في قائمة المتصفح)، يستخدم العديد من المطورين em بدلاً من البكسلات.
1em يساوي حجم الخط الحالي. حجم النص الافتراضي في المتصفحات هو 16 بكسل. إذن، الحجم الافتراضي لـ 1em هو 16 بكسل.
يمكن حساب الحجم من وحدات البكسل إلى وحدات em باستخدام هذه الصيغة: pixels/16=em
مثال:
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
في المثال أعلاه، يكون حجم النص في em هو نفسه مثال وحدات البكسل السابق. ومع ذلك، مع حجم em، من الممكن ضبط حجم النص في جميع المتصفحات.
لسوء الحظ، لا يزال هناك مشكلة مع الإصدارات القديمة من Internet Explorer. يصبح النص أكبر مما ينبغي عند تكبيره، وأصغر مما ينبغي عند تصغيره.
استخدام مزيج من النسبة المئوية و em:
الحل الذي يعمل في جميع المتصفحات هو تعيين حجم خط افتراضي كنسبة مئوية لعنصر <body>:
مثال:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
يعمل كودنا بشكل رائع الآن! إنه يعرض نفس حجم النص في جميع المتصفحات، ويسمح لجميع المتصفحات بتكبير النص أو تغيير حجمه!
حجم خط قابل للتجاوب:
يمكن تعيين حجم النص بوحدة vw، والتي تعني “عرض نافذة العرض”.
بهذه الطريقة سيتبع حجم النص حجم نافذة المتصفح:
Hello World قم بتغيير حجم نافذة المتصفح لرؤية كيفية تغيير حجم الخط.
مثال:
<h1 style="font-size:10vw">Hello World</h1>
خطوط جوجل في CSS
ما هي خطوط جوجل؟
إذا كنت لا ترغب في استخدام أي من الخطوط القياسية في HTML، يمكنك استخدام خطوط جوجل.
خطوط جوجل مجانية الاستخدام، وتحتوي على أكثر من 1000 خط للاختيار من بينها.
كيفية استخدام خطوط جوجل:
- أضف رابطًا خاصًا للمظهر في قسم
<head>ثم أشر إلى الخط في CSS.
مثال:
نريد هنا استخدام خط يسمى “Sofia” من خطوط جوجل:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
النتيجة:
ملاحظات:
- عند تحديد خط في CSS، أدرج دائمًا خط احتياطي واحد على الأقل (لتجنب السلوكيات غير المتوقعة). لذلك، يجب أيضًا هنا إضافة عائلة خطوط عامة (مثل serif أو sans-serif) إلى نهاية القائمة.
- للاطلاع على قائمة جميع خطوط جوجل المتاحة، قم بزيارة دليل كيفية استخدام خطوط جوجل.
استخدام خطوط جوجل متعددة:
لاستخدام خطوط جوجل متعددة، ما عليك سوى فصل أسماء الخطوط بعلامة الأنبوب (|)، مثل هذا:
مثال:
طلب خطوط متعددة:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
النتيجة:
ملاحظة: قد يؤدي طلب خطوط متعددة إلى إبطاء تحميل صفحات الويب الخاصة بك! لذا كن حذرًا بشأن ذلك.
تخصيص خطوط جوجل:
بكل تأكيد يمكنك تخصيص خطوط جوجل كما تريد، باستخدام CSS!
مثال:
تخصيص خط “Sofia”:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
النتيجة:
تمكين تأثيرات الخطوط:
أتاح جوجل أيضًا تأثيرات خطوط مختلفة يمكنك استخدامها.
أضف أولاً effect=effectname إلى واجهة برمجة تطبيقات جوجل، ثم أضف اسم فئة خاصًا إلى العنصر الذي سيستخدم التأثير الخاص. يبدأ اسم الفصل دائمًا بـ font-effect- وينتهي بـ effectname.
مثال:
إضافة تأثير النار إلى خط “Sofia”:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>النتيجة:
لاستخدام تأثيرات خطوط متعددة، ما عليك سوى فصل أسماء التأثيرات بعلامة الأنبوب (|)، مثل هذا:
مثال:
إضافة تأثيرات متعددة إلى خط “Sofia”:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
قواعد تجميع الخطوط الرائعة في CSS
يعد تجميع الخطوط الرائعة أمراً أساسياً لتصميم رائع.
قواعد تجميع الخطوط:
فيما يلي بعض القواعد الأساسية لإنشاء تجميعات خطوط رائعة:
1. التكامل:
من الآمن دائمًا العثور على تجميعات خطوط تكمل بعضها البعض. يجب أن يتناغم مزيج الخطوط الرائع، دون أن يكون متشابهًا جدًا أو مختلفًا جدًا.
2. استخدام عائلات الخطوط فوق:
عائلة خطوط فوق هي مجموعة من الخطوط المصممة لتتوافق بشكل جيد معًا. لذلك، فإن استخدام خطوط مختلفة ضمن نفس العائلة فوق آمن. على سبيل المثال، تحتوي عائلة Lucida على الخطوط التالية: Lucida Sans و Lucida Serif و Lucida Typewriter Sans و Lucida Typewriter Serif و Lucida Math.
3. التباين هو الملك:
غالبًا ما يتعارض خطان متشابهان جدًا. ومع ذلك، فإن التباينات، إذا تم عملها بالطريقة الصحيحة، تُظهر أفضل ما في كل خط. مثال: يعد الجمع بين serif و sans serif مزيجًا معروفًا. تتضمن عائلة خطوط قوية كلا من أشكال serif و sans serif لنفس الخط (مثل Lucida و Lucida Sans).
4. اختر رئيسًا واحدًا فقط:
يجب أن يكون هناك خط رئيسي واحد. يحدد هذا التسلسل الهرمي للخطوط على صفحتك. ويمكن تحقيق ذلك من خلال تغيير الحجم والوزن واللون.
مثال:
لا شك أن “جورجيا” هو الرئيس هنا:
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
فيما يلي، عرضنا بعض تجميعات الخطوط الشائعة التي تناسب العديد من العلامات التجارية والسياقات.
جورجيا وفردانا
تُعد زوج الخطوط “جورجيا وفردانا” مزيجًا كلاسيكيًا رائعًا. كما أنه يلتزم بمعايير خطوط الويب الآمنة:
مثال:
استخدم خط “جورجيا” للعناوين، وخط “فردانا” للنص:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
هيلفيتيكا وجارamond
يعتبر ثنائي الخطوط “هيلفيتيكا وجارamond” مزيجًا كلاسيكيًا آخر يستخدم خطوط الويب الآمنة.
مثال:
استخدم خط “هيلفيتيكا” للعناوين، وخط “Garamond” للنص:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
font-size: 16px;
}
h1 {
font-family: Helvetica, sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>تجميعات خطوط جوجل الشهيرة
إذا كنت لا ترغب في استخدام خطوط قياسية في HTML، يمكنك استخدام خطوط جوجل. خطوط جوجل مجانية الاستخدام، وتحتوي على أكثر من 1000 خط للاختيار من بينها.
فيما يلي بعض تجميعات خطوط جوجل الشائعة:
Merriweather و Open Sans
مثال:
استخدم خط “Merriweather” للعناوين، وخط “Open Sans” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family: Merriweather, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>أوبونتو ولونا
مثال:
استخدم خط “أوبونتو” للعناوين، وخط “لونا” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: Lora, serif;
font-size: 16px;
}
h1 {
font-family: Ubuntu, sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
ابريل فتفيس وبوبينز
مثال:
استخدم خط “Abril Fatface” للعناوين وخط “Poppins” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
font-family: Poppins, sans-serif;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>سينزيل وفاونا ون
مثال:
استخدم خط “Cinzel” للعناوين، وخط “Fauna One” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
font-family: 'Fauna One', serif;
font-size: 16px;
}
h1 {
font-family: Cinzel, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
فيالا ون وباسكيرفيل ليبر
مثال:
استخدم خط “فيالا ون” للعناوين، وخط “باسكيرفيل ليبر” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
}
h1 {
font-family: 'Fjalla One', sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>سبيس مونو ومولي
مثال:
استخدم خط “Space Mono” للعناوين، وخط “Muli” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
font-family: Muli, sans-serif;
font-size: 16px;
}
h1 {
font-family: "Space Mono", monospace;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
سبكترال وروبيك
مثال:
استخدم خط “سبكترال” للعناوين، وخط “روبيك” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
font-family: Rubik, sans-serif;
font-size: 16px;
}
h1 {
font-family: Spectral, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>أوزوالد ونوتو سانز
مثال:
استخدم خط “أوزوالد” للعناوين، وخط “نوتو سانز” للنص:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<style>
body {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family: Oswald, sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>خاصية الخط في لغة CSS
اختصار الكود:
لتقصير الكود، بإمكانك تحديد جميع خصائص الخط الفردية في خاصية واحدة.
خاصية الخط:
تعتبر خاصية font في CSS اختصارًا للخصائص التالية:
font-style: نمط الخط (مثل عادي، مائل، غامق)font-variant: تباين الخط (مثل صغير، عريض)font-weight: وزن الخط (مثل عادي، غامق، خفيف)font-size/line-height: حجم الخط وارتفاع السطرfont-family: عائلة الخطوط (مثل Arial، Times New Roman)
ملاحظة:
- قيمتا
font-sizeوfont-familyإلزاميتان. إذا كانت إحدى القيم الأخرى مفقودة، يتم استخدام قيمتها الافتراضية.
مثال:
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
