يعد اختيار نمط الخط الصحيح عنصرا مهما في تصميم موقع الويب أو التطبيق الخاص بك. يمكن للخط المختار جيدا أن يجعل المحتوى الخاص بك أكثر قابلية للقراءة وجاذبية وملاءمة لأهداف مشروعك.
يمكنك استخدام طرق مختلفة لتغيير نمط الخط ، من البسيط إلى الأكثر تعقيدا. واحدة من أسهل الطرق هي استخدام الخطوط المضمنة ، والتي تتوفر بشكل افتراضي في جميع المتصفحات. توفر هذه الخطوط توافقا جيدا عبر الأنظمة الأساسية ، ولكنها قد تكون محدودة إلى حد ما في خيارات التصميم.
لتغيير نمط الخط بشكل أكثر مرونة ، يمكنك استخدام الخطوط الخارجية مثل خطوط جوجل. أنها توفر مجموعة واسعة من الخطوط في أنماط مختلفة وخيارات التصميم. لاستخدام الخطوط الخارجية ، سوف تحتاج إلى نسخ ولصق رمز خاص في ملف هتمل الخاص بك.
طريقة أخرى لتغيير نمط الخط هو استخدام كس. كس يسمح لك لتخصيص جميع جوانب الخط ، بما في ذلك الحجم واللون ومخطط الخط ، والمحاذاة ، وما إلى ذلك. يمكنك تطبيق الأنماط على عناصر صفحة معينة أو على مجموعات من العناصر. وضع أنماط عبر المغلق يزيد بشكل كبير من المرونة والسيطرة على تصميم الخط الخاص بك.
- استخدام كس لتغيير نمط الخط
- تغيير لون الخط وحجمه باستخدام كس
- استخدام الخطوط من مصادر خارجية
- تغيير الخطوط على صفحة ويب باستخدام خطوط جوجل
- استخدام سمة" النمط " لتغيير نمط الخط
- تغيير نمط الخط عبر شريط أدوات المتصفح
- تغيير نمط الخط في برامج تحرير التعليمات البرمجية
استخدام كس لتغيير نمط الخط
هناك العديد من الخصائص لتغيير نمط الخط في كس:
- الخط الأسرة: يسمح لك بتحديد الخط الذي سيتم عرضه على الصفحة. على سبيل المثال ، يمكنك تحديد "أريال" ، "هلفتيكا" ، "فيردانا" وغيرها;
- حجم الخط: يحدد حجم الخط. يمكنك تحديده بالبكسل أو النسب المئوية أو وحدات القياس الأخرى;
- وزن الخط: يحدد سمك الخط ، على سبيل المثال ، يمكنك تحديد" عادي "لخط عادي أو "غامق" لخط غامق;
- نمط الخط: يحدد نمط الخط. القيمة" مائل " تجعل الخط مائلا;
- زخرفة النص: يضيف تصميم نص زخرفي، على سبيل المثال ، يمكنك تحديد "تسطير" لتسطير أو" خط من خلال " للنص يتوسطه خط;
- محاذاة النص: يحدد المحاذاة الأفقية للنص ، على سبيل المثال ، " اليسار "للمحاذاة اليسرى أو" المركز " للتوسيط.
مثال على استخدام هذه الخصائص في كس:
الخط الأسرة: أريال ، بلا الرقيق;
حجم الخط: 16 بكسل;
وزن الخط: غامق;
) سيتم عرض صفحة ويب في الخط اريال ، لديها حجم 16 بكسل ونمط مائل غامق ، مع سفلية ومحاذاة المركز.
باستخدام كس لتغيير نمط الخط ، يمكنك تحسين مظهر صفحة الويب الخاصة بك بشكل كبير وإنشاء تصميم محتوى فريد.
تغيير لون الخط وحجمه باستخدام كس
رغب(255 ، 0 ، 0)
.
مثال على استخدام كس لتغيير لون الخط:
سيكون هذا النص أزرق اللون.
هناك طريقة أخرى لتغيير نمط الخط وهي تغيير حجمه. للقيام بذلك ، يمكنك استخدام الخاصية
حجم الخط
.
مثال على استخدام كس لتغيير حجم الخط:
سيكون لهذا النص حجم خط 20 بكسل.
باستخدام كس ، يمكنك الجمع بين تغيير اللون وحجم الخط لإنشاء أنماط فريدة للنص الخاص بك. على سبيل المثال ، يمكنك تعيين لون خط أزرق وحجم خط 20 بكسل لعنوانك:
يتيح لك تغيير اللون وحجم الخط باستخدام كس إنشاء صفحات ويب جذابة وفريدة من نوعها من الناحية الجمالية ، وجذب انتباه الزوار وتحسين إدراكهم للمعلومات.
استخدام الخطوط من مصادر خارجية
| بالإضافة إلى الخطوط القياسية المتوفرة افتراضيا في المتصفحات ، يمكنك أيضا استخدام الخطوط من مصادر خارجية. هذا يسمح لك بإنشاء تصميم فريد وأصلي لموقع الويب الخاص بك. | لاستخدام الخطوط من مصادر خارجية ، ستحتاج إلى خاصية كس |
|---|---|
@الخط الوجه | . أولا ، تحتاج إلى تحميل ملف الخط إلى الخادم الخاص بك أو إلى خدمة استضافة ملفات تابعة لجهة خارجية. ثم أضف الكود التالي إلى ملف كس الخاص بك: |
| @الخط الوجه { |
الخط الأسرة: 'اسم الخط'; | سرك: ورل('مسار/إلى/خط_ملف.'); |
}
استبدال
- اسم الخط
- مع اسم الخط الذي تريد استخدامه و
- المسار / إلى / ملف الخط.الصندوق
- إلى المسار الفعلي لملف الخط الذي تم تنزيله.
- بعد ذلك ، يمكنك استخدام الخط المحدد في المستند الخاص بك ببساطة عن طريق تحديد اسمه في الخاصية
- الخط الأسرة
- . على سبيل المثال ، إذا كنت تريد تطبيق خط على رأس المستوى الأول ، فيمكنك استخدام التعليمات البرمجية التالية:
ح1 {
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
}
بدلا من
- اسم الخط
- حدد اسم الخط الذي اخترته ، و
- استخدام بلا الرقيق
كخيار النسخ الاحتياطي بحيث يظهر المتصفح الخطوط القياسية إذا كان الخط الذي حددته غير متوفر.
ضع في اعتبارك أن تحميل الخطوط التي تم تنزيلها من مصادر خارجية قد يستغرق وقتا أطول من تحميل الخطوط القياسية ، لذلك يوصى بتحسين أحجامها واستخدام التخزين المؤقت لتسريع تحميل الصفحة.
الوسم
- الوصف
- @الخط الوجه
- يحدد الخط المخصص الذي يمكن استخدامه في المستند.
الخط الأسرة
تعيين اسم الخط أو قائمة الخطوط للعنصر.
سرك
يحدد مصدر ملف الخط.
تغيير الخطوط على صفحة ويب باستخدام خطوط جوجل
جوجل الخطوط يوفر مجموعة ضخمة من الخطوط المجانية التي يمكنك استخدامها على صفحات الويب الخاصة بك. هذه طريقة رائعة لجعل موقعك أكثر تميزا وجاذبية للزوار.
لاستخدام خطوط جوجل ، ستحتاج إلى عدة خطوات:
افتح مستعرض ويب وانتقل إلى موقع خطوط جوجل (https://fonts.جوجل .كوم/).
من خلال تصفح الخطوط المتاحة واختيار تلك التي تريد. يمكنك تصفية الخطوط حسب معلمات مختلفة ، مثل الفئة أو ما إذا كانت السيريلية مدعومة.
بعد تحديد الخط ، انقر فوق الزر" تحديد هذا الخط".
في صفحة الخط المحدد ، سترى خيارات متنوعة لاستخدامه ، مثل الخطوط العادية والجريئة.
انسخ الرمز المقدم لتوصيل الخط بصفحة الويب الخاصة بك. هذا هو عادة رمز في شكل ارتباط إلى ملف كس أو نمط مضمن.
الصق الكود المنسوخ في قسم صفحة الويب الخاصة بك.
الآن يمكنك استخدام الخط المحدد عن طريق تحديده في كس للعناصر المطلوبة من صفحتك. على سبيل المثال ، يمكنك استخدام خاصية "عائلة الخط" وتحديد اسم الخط بين علامتي اقتباس.
الآن أنت تعرف كيفية تغيير الخطوط على صفحة الويب الخاصة بك باستخدام خطوط جوجل. لديك تصميم جيد!
استخدام سمة" النمط " لتغيير نمط الخط
تسمح لك سمة" النمط " في هتمل بتعيين أنماط مباشرة للعناصر الفردية لصفحة الويب ، بما في ذلك الخط. باستخدام سمة" النمط " ، يمكنك تغيير خصائص الخط مثل اللون والحجم والنمط (على سبيل المثال ، غامق أو مائل) ، بالإضافة إلى العديد من الخصائص الأخرى.
لتغيير نمط الخط باستخدام سمة" النمط " ، قم بإضافته إلى علامة العنصر المراد تصميمه. على سبيل المثال ، إذا كنت بحاجة إلى تغيير نمط الخط لفقرة ما ، فقد يبدو الرمز كما يلي:
تحتوي هذه الفقرة على نمط خط أريال وحجم 16 بكسل ونص غامق.