أوراق الأنماط المتتالية (كس) هي الأداة الرئيسية لمطوري الويب لإدارة وتغيير مظهر صفحات الويب. أحد التغييرات الأكثر شيوعا التي يرغب مطورو الويب في إجراؤها هو تغيير نمط الخط. باستخدام كس ، يمكنك بسهولة تغيير حجم ولون ونمط وتخطيط النص على صفحة ويب.
في هذا الدليل التفصيلي ، سننظر في طرق مختلفة لتغيير نمط الخط باستخدام كس. سنوضح لك كيفية تغيير حجم الخط ، واختيار الخط المناسب من بين العديد من الخيارات المتاحة ، وتطبيق نمط غامق أو مائل واستخدام نص بتأثيرات مختلفة. سننظر أيضا في كيفية استخدام الخطوط الخارجية والقواعد المتتالية للتحكم الأكثر دقة في تصميم النص.
لتغيير نمط الخط باستخدام كس ، تحتاج إلى إنشاء قاعدة كس للعنصر المحدد ، وتعيين الخصائص والقيم المطلوبة ، وتطبيق هذه القاعدة على صفحة الويب الخاصة بك. مع كس ، يمكنك تحقيق تصميم النص جميلة وظيفية في نفس الوقت.
- اختيار الخط المناسب لمشروع الويب الخاص بك
- ربط الخطوط باستخدام @الخط الوجه
- تغيير حجم الخط باستخدام كس
- تغيير لون الخط والخلفية
- إضافة نمط نص باستخدام خاصية نمط الخط
اختيار الخط المناسب لمشروع الويب الخاص بك
1. نمط موقع الويب الخاص بك أولا وقبل كل شيء ، النظر في نمط موقع الويب الخاص بك وتحديد الغرض منه. إذا كان موقع الويب الخاص بك شركة الشركات ، قد ترغب في استخدام خط رسمي والمهنية. إذا كان موقعك يستهدف جمهورا من الشباب أو كان له طابع إبداعي ، فيمكنك اختيار خط أكثر تجريبية وغير عادية. | 2. سهولة القراءة أحد أهم الجوانب عند اختيار الخط هو سهولة قراءته. تأكد من سهولة قراءة الخط الذي اخترته على أجهزة وأحجام شاشة مختلفة. حجم الخط الأمثل والربط مهم أيضا لضمان أقصى قدر من القراءة. |
4. الطباعة استكشاف أنواع مختلفة من الخطوط — الرقيق ، بلا الرقيق ، مكتوبة بخط اليد ، الخ. - لتحديد النمط الذي يناسب مشروع الويب الخاص بك. يمكنك أيضا التفكير في استخدام مجموعة خطوط لإنشاء اهتمام مرئي وإبراز العناصر المهمة. |
قبل اتخاذ قرار نهائي ، جرب الخطوط المختلفة ومجموعاتها. استخدم أدوات مثل خطوط جوجل للعثور على الخطوط التي تناسب مشروعك وتكمل أسلوبه. تذكر أن الخطوط جزء مهم من المكون المرئي لموقعك على الويب ويمكن أن تؤثر بشكل كبير على إدراكه ونجاحه.
ربط الخطوط باستخدام @الخط الوجه
أولا ، تحتاج إلى تنزيل ملف الخط بالتنسيق.ووف,.2,.أوتف أو .إلى خادم استضافة صفحة الويب.
بعد تحميل خط إلى الخادم ، يجب تحديد مساره في ملف كس باستخدام السمة @ الخط الوجه . يوجد أدناه مثال على رمز توصيل الخط:
- في ملف كس.
- استخدام السمة @ الخط الوجه وتحديد المسار إلى الخط باستخدام وظيفة ورل ().
- حدد خصائص عائلة الخط و سرك.
- При необходимости можно указать дополнительные свойства шрифта, такие как font-weight и font-style.
Вот пример кода:
@font-face {
url('путь_к_шрифту/шрифт.woff') format('woff');font-style: normal;
}
- بعد تحديد @الخط الوجه ، يمكن استخدام الخط في قواعد كس لعناصر مختلفة على صفحة ويب عن طريق تحديد عائلة الخط التي تم إنشاؤها في سمة @الخط الوجه. على سبيل المثال:
ح1 {
الخط الأسرة: 'ميفونت' ، بلا الرقيق;
}
باستخدام السمة @ الخط الوجه ، يمكنك تحسين مظهر صفحة الويب الخاصة بك وخلق نمط فريد من شأنها أن تلبي الاحتياجات والتفضيلات الخاصة بك.
| تغيير حجم الخط باستخدام كس | يلعب حجم الخط دورا مهما في إنشاء صفحات ويب جذابة بصريا. مع المغلق ، يمكنك بسهولة تغيير حجم الخط وجعلها مناسبة لاحتياجاتك. |
|---|---|
يمكنك استخدام عدة وحدات قياس مختلفة لتغيير حجم الخط في كس. الأكثر شيوعا هي: | بكسل (بكسل): هذه وحدة قياس مطلقة تحدد حجم الخط بالبكسل. يمكنك تحديد قيمة معينة ، على سبيل المثال ، حجم الخط: 16 بكسل; |
لتطبيق حجم الخط المحدد على النص ، تحتاج إلى استخدام خاصية حجم الخط في كس. فيما يلي بعض أمثلة الاستخدام:
| حجم الخط: 20 بكسل ؛ - اضبط حجم الخط على 20 بكسل. | حجم الخط: 150 ٪ ؛ - زيادة حجم الخط بنسبة 50 ٪ بالنسبة لحجم العنصر الأصل. |
|---|---|
حجم الخط: 1.2 م; - زيادة حجم الخط بنسبة 20 ٪ بالنسبة إلى الحجم الحالي. | تغيير حجم الخط باستخدام كس مرنة جدا. يمكنك تطبيق وحدات قياس مختلفة ودمجها لتحقيق النتيجة المرجوة. تجربة واختيار حجم الخط الأمثل للمحتوى الخاص بك! |
تغيير لون الخط والخلفية
| مع المغلق ، يمكنك بسهولة تغيير لون الخط ولون الخلفية على موقع الويب الخاص بك. هذا يسمح لك لخلق تصاميم جميلة وفريدة من نوعها وفقا لتفضيلاتك والعلامة التجارية. | لتغيير لون الخط في كس ، يمكنك استخدام |
|---|---|
خاصية اللون | . على سبيل المثال ، لتعيين لون الخط إلى اللون الأحمر ، يمكنك إضافة التعليمات البرمجية التالية: |
كود
النتيجة
ف { اللون: أحمر؛}
سيكون هذا النص أحمر اللون.
لتغيير لون خلفية الخط ، يمكنك استخدام الخاصية
لون الخلفية
. على سبيل المثال ، لتعيين لون الخلفية الأصفر للخط ، يمكنك إضافة الكود التالي:
كود
النتيجة
ف { لون الخلفية: أصفر؛}سيكون لهذا النص لون خلفية أصفر.