fonts
شرح تنسيق النصوص fonts
خاصية font في CSS تستخدم لتحديد الخصائص المتعلقة بالخط، وتشمل خصائص مثل نوع الخط، حجم الخط، اللون، والمزيد. يمكن تحديد هذه الخصائص باستخدام قيم معينة، مثل الأسماء الرسمية للخطوط والأنواع والأحجام المختلفة.
تتضمن بعض الخصائص الأساسية المتعلقة بالخط في CSS:
font-family: وتستخدم لتحديد نوع الخط المستخدم. يمكن تحديد قائمة بأكثر من نوع خط، حيث يستخدم المستعرض أول نوع خط متاح على جهاز المستخدم.font-size: وتستخدم لتحديد حجم الخط. يمكن تحديد القيمة بالنسبة لحجم الجهاز أو بالنسبة لحجم الجهاز المستخدم.font-weight: وتستخدم لتحديد سمك الخط. يمكن تحديد قيمة بين 100 و 900، حيث تزيد القيمة عن 400 تصبح الخطوط أكثر سمكًا.font-style: وتستخدم لتحديد نمط الخط، مثل إمالة الخط بشكل مائل (italic) أو تحويل الخط إلى عريض (bold).font-variant: وتستخدم لتحديد نوع الخط، مثل الكابيتال (الأحرف الكبيرة) أو السمول كابيتال (الأحرف الصغيرة الأولى فقط).line-height: وتستخدم لتحديد المسافة بين الأسطر.
وفيما يلي بعض الأمثلة على استخدام الخاصية font في CSS:
شرح خاصية font-family
خاصية font-family في CSS تستخدم لتحديد نوع الخط المستخدم للنص داخل عناصر HTML. يمكن تحديد نوع الخط باستخدام الأسماء الرسمية للخطوط أو الأنواع العامة للخطوط مثل sans-serif أو serif. يمكن أيضًا تحديد قائمة بأكثر من نوع خط، حيث يستخدم المستعرض أول نوع خط متاح على جهاز المستخدم.
وفيما يلي بعض الأمثلة على استخدام الخاصية font-family في CSS:
- لتحديد نوع الخط باستخدام الأسماء الرسمية للخطوط:
h1 {
font-family: "Helvetica Neue", Arial, sans-serif;
}
- لتحديد نوع الخط باستخدام الأنواع العامة للخطوط:
p {
font-family: sans-serif;
}
- لتحديد قائمة بأكثر من نوع خط:
h2 {
font-family: "Times New Roman", Times, serif;
}
يمكن استخدام خاصية font-family بشكل مفيد لتحديد نوع الخط الذي يتم استخدامه على صفحة الويب، ويمكن تحديد قائمة بأكثر من نوع خط لضمان أن تكون الخطوط متاحة بغض النظر عن جهاز المستخدم.
Web Safe Fonts
Web Safe Fonts هي مجموعة من الخطوط التي تكون متاحة على معظم أجهزة الكمبيوتر والمتصفحات، والتي يتم تضمينها في نظام التشغيل والمتصفحات الحديثة. يتضمن هذه المجموعة من الخطوط الأساسية الخطوط السيريف والسانس سيريف والسانس سيف. تستخدم خاصية font-family في CSS لتحديد الخطوط المستخدمة في صفحة الويب، ويمكن استخدام Web Safe Fonts للتأكد من أن الخطوط التي تستخدمها قابلة للعرض بشكل صحيح على معظم الأجهزة والمتصفحات.
وفيما يلي بعض الأمثلة على Web Safe Fonts:
- Arial: هو خط السانس سيريف الشهير والمتواجد بشكل افتراضي على معظم أجهزة الكمبيوتر والمتصفحات.
body {
font-family: Arial, sans-serif;
}
- Times New Roman: هو خط السيريف المشهور والمتواجد بشكل افتراضي على معظم أجهزة الكمبيوتر والمتصفحات.
h1 {
font-family: "Times New Roman", serif;
}
- Verdana: هو خط السانس سيريف الذي يتميز بالوضوح والسهولة في القراءة.
h2 {
font-family: Verdana, sans-serif;
}
يمكن استخدام Web Safe Fonts بشكل مفيد للتأكد من أن الخطوط المستخدمة في صفحة الويب قابلة للعرض بشكل صحيح على معظم الأجهزة والمتصفحات. ولضمان عرض الخطوط بشكل أفضل، يجب تحميل الخطوط من خوادم خارجية وتضمينها في صفحة الويب باستخدام CSS.
css google fonts
Google Fonts هي خدمة مجانية توفر مكتبة كبيرة من الخطوط المختلفة التي يمكن استخدامها في صفحات الويب. يمكن الوصول إلى Google Fonts من خلال موقعهم الرسمي، ويمكن تحميل الخطوط مباشرة من خوادم Google أو تضمينها في صفحة HTML باستخدام CSS.
يمكن استخدام Google Fonts بشكل مفيد لإضافة تنوع وتصميم جميل لصفحات الويب، والتأكد من عرض الخطوط بشكل صحيح على مختلف الأجهزة والمتصفحات. تتوفر Google Fonts بمجموعة كبيرة من الخطوط المتنوعة، ويمكن تحميلها أو تضمينها بسهولة في صفحات الويب باستخدام CSS.
Font Pairing Rules
خاصية Font Pairing Rules في CSS تتعلق بتوافق الخطوط والأساليب المختلفة للخطوط عند استخدامها معًا في صفحات الويب. يتم استخدام هذه القواعد لتحسين الجمالية والتوافقية للتصميم، وتجعل النصوص أكثر سهولة في القراءة والوضوح.
وفيما يلي بعض القواعد الشائعة لتوافق الخطوط في CSS:
- توافق الخطوط السيريف مع الخطوط السانس سيريف: يمكن استخدام خطوط السانس سيريف مع الخطوط السيريف، مثل الاستخدام الخطوط السانس سيريف للعناوين والخطوط السيريف للنصوص العادية. هذا يساعد على تحسين التباين بين العناوين والنصوص.
- توافق الخطوط المتناقضة: يمكن استخدام خطوط متناقضة، مثل الاستخدام الخطوط العريضة مع الخطوط الرفيعة، لتحسين الاهتمام بالعنوان والاستمرار في القراءة.
- توافق الخطوط بنفس الوزن: يمكن استخدام خطوط بنفس الوزن معًا، مثل الاستخدام الخطوط الرفيعة مع الخطوط الرفيعة، لإنتاج تصميم نظيف ومرتب.
- توافق الخطوط بنفس العائلة: يمكن استخدام خطوط بنفس العائلة معًا، مثل الاستخدام الخطوط السانس سيريف من نفس العائلة، لتحسين التوافق والتناسق في التصميم.
يمكن استخدام القواعد المختلفة لتوافق الخطوط في CSS بشكل مفيد لتحسين التصميم والجمالية للنصوص. يجب الاهتمام بالتوافقية بين الخطوط المختلفة والحفاظ على الاستمرارية والتجانس في التصميم.
شرح خاصية font-size
خاصية font-size في CSS تستخدم لتحديد حجم الخط المستخدم للنص داخل عناصر HTML. يمكن تحديد الحجم بوحدات مختلفة مثل البيكسل (px) أو النسبة المئوية (%) أو العرض (vw) أو الارتفاع (vh).
وفيما يلي بعض الأمثلة على استخدام الخاصية font-size في CSS:
- لتحديد حجم الخط بوحدة البيكسل:
h1 {
font-size: 32px;
}
- لتحديد حجم الخط بالنسبة المئوية إلى الحجم الأساسي للمستند:
p {
font-size: 150%;
}
- لتحديد حجم الخط بوحدة العرض (vw):
h2 {
font-size: 5vw;
}
يمكن استخدام خاصية font-size بشكل مفيد لتحديد حجم الخط الذي يتم استخدامه على صفحة الويب، ويساعد في جعل النص سهل القراءة وجذاب للعين. يمكن استخدام وحدات مختلفة لتحديد حجم الخط بناءً على احتياجات التصميم وحجم النص المراد عرضه.
شرح خاصية font-weight
خاصية font-weight في CSS تستخدم لتحديد سمك الخط المستخدم للنص داخل عناصر HTML. تتراوح قيم هذه الخاصية من 100 إلى 900، حيث تزيد القيمة عن 400 تصبح الخطوط أكثر سمكًا.
وفيما يلي بعض الأمثلة على استخدام الخاصية font-weight في CSS:
- لتحديد سمك الخط إلى الحد الأدنى:
p {
font-weight: 100;
}
- لتحديد سمك الخط إلى الحد الأقصى:
h1 {
font-weight: 900;
}
- لتحديد سمك الخط بشكل عرضي:
h2 {
font-weight: bold;
}
يمكن استخدام خاصية font-weight بشكل مفيد لتحديد سمك الخط المستخدم على صفحة الويب، ويمكن استخدام قيم مختلفة لتحقيق تأثيرات مختلفة. يمكن استخدام القيم الرسمية المحددة للخطوط أو القيم العرضية (مثل bold أو normal) لتحديد سمك الخط بشكل أسهل.
شرح خاصية font-style
خاصية font-style في CSS تستخدم لتحديد نمط الخط المستخدم للنص داخل عناصر HTML. يمكن تحديد نمط الخط باستخدام الأسماء الرسمية للنماط مثل italic أو oblique أو باستخدام القيمة normal لتحديد نمط الخط العادي.
وفيما يلي بعض الأمثلة على استخدام الخاصية font-style في CSS:
- لتحديد نمط الخط إلى العادي:
p {
font-style: normal;
}
- لتحديد نمط الخط إلى المائل:
h1 {
font-style: italic;
}
- لتحديد نمط الخط إلى المائل الإجباري:
h2 {
font-style: oblique;
}
يمكن استخدام خاصية font-style بشكل مفيد لتحديد نمط الخط المستخدم على صفحة الويب، ويمكن استخدام القيم الرسمية المحددة للنمط (مثل italic أو oblique) لتحديد نمط الخط بشكل دقيق، أو يمكن استخدام القيمة normal لتحديد نمط الخط العادي.
شرح خاصية font-variant
خاصية font-variant في CSS تستخدم لتحديد تغييرات على نمط الخط، مثل تحويل الأحرف الصغيرة إلى أحرف كبيرة (بالحروف الصغيرة الرسمية) أو تحويل الأحرف الكبيرة إلى أحرف صغيرة (بالحروف الكبيرة الرسمية). يمكن تحديد هذه الخاصية باستخدام الأسماء الرسمية للتغييرات مثل small-caps أو all-small-caps أو petite-caps.
وفيما يلي بعض الأمثلة على استخدام الخاصية font-variant في CSS:
- لتحويل الأحرف الصغيرة إلى أحرف كبيرة:
p {
font-variant: small-caps;
}
- لتحويل جميع الأحرف إلى أحرف صغيرة:
h1 {
font-variant: small-caps;
text-transform: lowercase;
}
- لتحويل الأحرف الكبيرة إلى أحرف صغيرة:
h2 {
font-variant: petite-caps;
text-transform: lowercase;
}
يمكن استخدام خاصية font-variant بشكل مفيد لإضافة تغييرات إضافية على نمط الخط، وتحسين قابلية القراءة والجمالية للنص. يمكن استخدام القيم الرسمية المحددة لتحديد تغييرات محددة على نمط الخط، مثل small-caps أو all-small-caps أو petite-caps.
شرح خاصية line-height
خاصية line-height في CSS تستخدم لتحديد ارتفاع السطر، أي المسافة بين الأسطر المتتالية في النص. يمكن تحديد هذه الخاصية باستخدام وحدات مختلفة مثل البيكسل (px) أو النسبة المئوية (%).
وفيما يلي بعض الأمثلة على استخدام الخاصية line-height في CSS:
- لتحديد ارتفاع السطر بوحدة البيكسل:
p {
line-height: 1.5em;
}
- لتحديد ارتفاع السطر بالنسبة المئوية إلى حجم الخط:
h1 {
font-size: 32px;
line-height: 150%;
}
- لتحديد ارتفاع السطر بوحدة العرض (vw):
h2 {
font-size: 5vw;
line-height: 1.2em;
}
يمكن استخدام خاصية line-height بشكل مفيد لتحسين قابلية القراءة والجمالية للنص، وتحسين توزيع النص داخل الصفحة. يمكن استخدام وحدات مختلفة لتحديد ارتفاع السطر بناءً على احتياجات التصميم وحجم الخط المستخدم.
شرح Font shorthand
خاصية Font Shorthand في CSS تستخدم لتحديد خصائص الخط في صفحة الويب بطريقة مختصرة وسهلة الاستخدام. تسمح هذه الخاصية بتحديد العديد من الخصائص الخاصة بالخط في سطر واحد، بدلاً من كتابة كل خاصية على حدة. تتكون خاصية Font Shorthand من الخصائص التالية:
- العائلة (font-family):
تحدد نوع الخط المستخدم، مثل Arial أو Times New Roman. - الحجم (font-size):
يحدد حجم الخط، مثل 16px أو 1.5em. - السماكة (font-weight):
يحدد سماكة الخط، مثل normal أو bold. - النمط (font-style):
يحدد نمط الخط، مثل normal أو italic. - اللون (color):
يحدد لون الخط، مثل #000 أو red.
يمكن استخدام الخاصية بأي ترتيب من الخصائص الخمسة التي سبق ذكرها، مع الحفاظ على ترتيب الخصائص ضمن الخاصية. وفي حالة عدم تحديد أي خاصية، فإن القيم الافتراضية ستستخدم لتلك الخاصية.
وفيما يلي بعض الأمثلة على استخدام خاصية Font Shorthand في CSS:
- تحديد العائلة والحجم:
p {
font: 20px Arial, sans-serif;
}
- تحديد العائلة والحجم والسماكة:
h1 {
font: bold 30px Georgia, serif;
}
- تحديد العائلة والحجم والسماكة والنمط:
h2 {
font: italic bold 24px Times New Roman, serif;
}
- تحديد العائلة والحجم واللون:
h3 {
font: 18px Verdana, sans-serif #333;
}
إذا لم يتم تحديد بعض الخصائص في خاصية Font Shorthand، فسيتم استخدام القيم الافتراضية لهذه الخصائص. يمكن استخدام الخاصية لتحسين سرعة كتابة الشفرة وجعل التصميم أكثر أناقة وتنظيمًا.