تغيير نوع الخط واللون المعروض على صفحة ويب

ملاحظة: ترتبط هذه الصفحة بتغيير نوع الخط وحجمه ولونه على صفحة الويب. بالنسبة إلى Microsoft Word ، راجع صفحتنا حول كيفية تغيير لون الخط أو حجمه أو كتابته في Word.

يحتوي هذا المستند على إرشادات حول كيفية تغيير الخط ولونه على صفحة ويب. بناء الجملة الصحيح للمضي قدمًا هو استخدام Cascading Style Sheets مع محددات الفئة أو معرّف الهوية بدلاً من سمة نمط سطري أو علامة خط تم إهمالها. على الرغم من ذلك ، تجدر الإشارة إلى أن هاتين الطريقتين لا تزال تعمل مع معظم متصفحات الإنترنت.

للمتابعة ، حدد الطريقة التي تريد أن تتعلم منها أو اقرأ كل قسم.

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

رمز المثال

يحتوي هذا النص على خط Courier وهو Blue و 20px.

نتيجة

يحتوي هذا النص على خط Courier وهو أزرق وحجمه 20 بكسل.

استخدام CSS لصفحة واحدة أو أكثر

خط مخصص لصفحة واحدة

في الجزء الرئيسي من صفحة الويب الخاصة بك ، يمكنك إدراج رمز بين علامات التبويب لتغيير مظهر النص في عناصر مختلفة. يحتوي المربع الأزرق التالي على رمز المثال الذي ، بمجرد استدعائه ، سيغير وجه الخط إلى Courier ويلونه باللون الأحمر. كما ترون ، قمنا بتعريف اسم الفصل على أنه "مخصص".

 .custom {font-family: Courier؛ لون احمر؛ FONT-SIZE: 20px؛ } 

بمجرد التعريف ، يمكن تطبيق هذا التصميم على معظم العناصر في صفحتك عن طريق إرفاق الفئة "المخصصة" بها. يعرض المربع التالي سطرين من التعليمات البرمجية ونتائج كل منهما.

مثال

هذه الجملة كلها حمراء وساعي

فقط كلمة اختبار حمراء وساعي.

نتيجة

هذه الجملة كلها حمراء وساعي.

فقط كلمة اختبار حمراء وساعي.

خط مخصص للعديد من الصفحات

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

باستخدام أي محرر نصي أساسي ، سيؤدي حفظ النص التالي كملف .css إلى إعداده للاستيراد.

 charset "utf-8" ؛

.courier {font-family: Courier؛ اللون: # 005CB9 ؛ }

بمجرد وضع النص السابق في ملف .css (أطلقنا عليه اسم basic.css ) ، يمكنك الارتباط به من أي صفحة أخرى باستخدام سطر مشابه للمثال التالي.

نصيحة: يمكن للمستخدمين تغيير سمات العناصر في الصفحة عن طريق تغيير الكود في ملف .css الذي تم استيراده.

حل علامة الخط

على الرغم من إهمالها ، لا يزال من الممكن استخدام علامة HTML وقد تكون ضرورية لاستخدامها مع بعض الخدمات عبر الإنترنت. عند استخدام علامة FONT ، يجب عليك تضمين سمة الواجهة ، التي تصف الخط الذي سيتم استخدامه. في المثال أدناه ، نستخدم خط Courier ورمز اللون السداسي عشري # 005CB9 ، وهو اللون الأزرق الغامق.

رمز المثال

 مثال خط خاص. 

نتيجة