كيفية تغيير الخط على الزر: دليل مفصل

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

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

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

على سبيل المثال ، إذا كنت ترغب في استخدام الخط أريال لزر زر ، يمكنك إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك:

زر {

الخط الأسرة: أريال ، بلا الرقيق;

}

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

1. تغيير الخط على الزر: دليل مفصل
2. الخطوة 1: تحديد الزر لتغيير الخط
3. الخطوة 2: تحديد الخطوط المتاحة
4. الخطوة 3: تطبيق الأنماط على الزر
5. الخطوة 4: تثبيت خط جديد للزر

تغيير الخط على الزر: دليل مفصل

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

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

مثال:

ادفعني

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

.زر الخط {

الخط الأسرة: أريال ، بلا الرقيق;

}

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

يمكنك أيضا تحميل الخط الخاص بك واستخدامه على الزر. Для этого нужно добавить файл шрифта на сервер и подключить его в CSS-файле с помощью правила @font-face.

• Пример:
• @font-face {

src: url("path/to/font.woff2") format("woff2"),

url("path/to/font.woff") format("woff");

}

• .button-font {
• font-family: "CustomFont", Arial, sans-serif;
• }
• В примере выше файлы шрифта находятся в папке «path/to» и имеют расширения .woff2 и .ووف ، وهي تنسيقات خطوط الويب الأكثر شيوعا. ثم قاعدة كس لفئة " زر الخط "يحدد اسم الخط الخاص به" كوستومفونت " ، ومن ثم ، مفصولة بفواصل ، والخطوط استبدال أريال و سانس-الرقيق.
• بعد حفظ وتطبيق ملف كس إلى الصفحة ، يجب تغيير الخط على زر زر وفقا للتكوين المحدد.

الخطوة 1: تحديد الزر لتغيير الخط

على سبيل المثال ، إذا كان لديك زر مع معرف "بلدي زر" ، يمكنك تحديده باستخدام محدد على النحو التالي:

باستخدام المعرف:

# زري

باستخدام الفصل:

.ماي بوتون

من خلال تحديد الزر الذي تريد تغييره ، يمكنك المتابعة إلى الخطوة التالية لتعيين خط جديد.

الخطوة 2: تحديد الخطوط المتاحة

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

أريال: بلا الرقيق الخط ، وسهلة القراءة;

تايمز نيو رومان: خط رقيق كلاسيكي ، غالبا ما يستخدم في تصميم الطباعة;

فيردانا: خط نظيف وسهل القراءة ، خاصة على الشاشات منخفضة الدقة;

تاهوما: خط حديث بلا رقيق مناسب تماما للعناوين والعناوين الفرعية;

جورجيا: الخط الرقيق مصممة لسهولة القراءة على الشاشة;

الخطوة 3: تطبيق الأنماط على الزر

بعد أن أنشأنا الزر في الخطوة السابقة ، يمكننا الآن تطبيق الأنماط لتغيير مظهره.

يمكن تطبيق الأنماط على زر باستخدام سمة النمط ، والتي يمكن إضافتها إلى علامة الزر.

مثال:

انقر لي

في المثال أعلاه ، نطبق نمطين على الزر: لون النص أحمر (اللون: أحمر) وحجم الخط 14 بكسل (حجم الخط: 14 بكسل).

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