يعد تحديد حجم الخط جانبا مهما من جوانب تطوير الويب. يجب أن تكون مواقع الويب قابلة للقراءة وسهلة الاستخدام. كيف يمكنني تغيير حجم الخط على موقع على شبكة الانترنت?
طريقة واحدة لتغيير حجم الخط على موقع على شبكة الانترنت هو استخدام كس (أوراق الأنماط المتتالية). باستخدام كس ، يمكنك تعيين حجم الخط لعناصر مختلفة من صفحة ويب. يتم استخدام خاصية" حجم الخط " لهذا الغرض.
على سبيل المثال ، لزيادة حجم الخط لجميع الفقرات على موقع الويب الخاص بك ، يمكنك استخدام رمز كس التالي:
ص {
حجم الخط: 20 بكسل;
}
هنا قمنا بتعيين حجم الخط إلى 20 بكسل لجميع الفقرات (ع). يمكنك تغيير قيمة" 20 بكسل " إلى أي قيمة أخرى تلبي متطلباتك.
- الشروع في العمل: ربط أنماط كس
- تغيير حجم الخط باستخدام وحدات القياس المطلقة
- تغيير حجم الخط باستخدام وحدات القياس النسبية
- تغيير حجم الخط باستخدام جافا سكريبت
- أمثلة: كيفية تغيير حجم الخط في عناصر مختلفة من الموقع
الشروع في العمل: ربط أنماط كس
لتغيير حجم الخط على موقع الويب ، سنحتاج إلى استخدام أنماط كس. لتوصيل هذه الأنماط برمز هتمل الخاص بنا ، نحتاج إلى إضافة علامة داخل القسم.
داخل العلامة ، سنحدد الفئات والخصائص التي ستغير حجم الخط. على سبيل المثال ، لزيادة حجم الخط لجميع العناوين على موقع ويب ، يمكننا استخدام الكود التالي:
في المثال أعلاه ، استخدمنا المحددات ح1, ح2, ح3, ح4, ح5 و ح6 وتعيين حجم الخط إلى 24 بكسل. يمكنك تحديد أي قيمة تناسب تفضيلاتك.
عندما نضيف هذا الرمز داخل العلامة .
- يتم استخدام بناء الجملة التالي لتعيين حجم الخط بالبكسل:
- حدد حجم النص المطلوب بالبكسل باستخدام القيمة بعد النقطتين. على سبيل المثال,
حجم الخط: 14 بكسل;
- قم بإنشاء سمة نمط أو "نمط" لعنصر هتمل. على سبيل المثال,
- حجم الخط: 12 نقطة;
يحدد حجم الخط إلى 12 نقطة.
يرجى ملاحظة أن حجم الخط المحدد باستخدام وحدات القياس المطلقة سيكون هو نفسه بغض النظر عن نسب جهاز المستخدم. ومع ذلك ، فإن استخدام حجم خط صغير جدا أو كبير جدا قد يجعل من الصعب قراءة النص على بعض الأجهزة. لذلك ، يوصى باختيار حجم الخط بعناية ، مع مراعاة سهولة القراءة والجمهور المستهدف للموقع.
تغيير حجم الخط باستخدام وحدات القياس النسبية
تسمح لك وحدات القياس النسبية بتحديد حجم الخط بالنسبة للعنصر الأصلي أو حجم الخط الافتراضي الذي حدده المتصفح.
سيتم عرض هذا النص بحجم خط 120٪ من حجم الخط الافتراضي.
وحدة قياس نسبية أخرى هي م. تعتمد قيمة م على حجم خط العنصر الذي يتم تطبيقه عليه. على سبيل المثال ، لتعيين خط ضعف حجم العنصر الأصل ، يمكننا استخدام التعليمات البرمجية التالية:
تسهل وحدات القياس النسبية تغيير حجم الخط وإنشاء مواقع ويب مرنة وسريعة الاستجابة. عند اختيار وحدة قياس نسبية ، يوصى بمراعاة التصميم والجمهور المستهدف لموقع الويب الخاص بك من أجل ضمان قراءة أفضل للنص.
| تغيير حجم الخط باستخدام جافا سكريبت | لتغيير حجم الخط على موقع ويب باستخدام جافا سكريبت ، يمكنك استخدام طرق اللغة مثل |
|---|---|
| و |
بادئ ذي بدء ، تحتاج إلى تعيين معرف فريد للعنصر الذي تريد تغيير الخط باستخدام
سمة المعرف
جافا سكريبت
مثال النص
| // الحصول على عنصر باستخدام معرف | عنصر فار = وثيقة.جيتليمنتبيد ("نص"); |
|---|---|
ثم يمكنك استخدام | النمط.طريقة فونتسيزي |
الآن حجم خط عنصر المعرف
النص
سيتم تغييرها بمقدار 20 بكسل.
يمكنك استخدام أحداث جافا سكريبت لتغيير حجم الخط اعتمادا على إدخال المستخدم أو شروط أخرى. على سبيل المثال ، لتغيير حجم الخط بالنقر فوق الزر:
أتش تي أم أل
جافا سكريبت
تغيير الدالة حجم الخط () {
فار كيرنتفونتسيزي = بارسينت (عنصر.أسلوب.فونتسيزي);
// زيادة حجم الخط بمقدار 2 بكسل
فار نيوفونتسيزي = كيرنتفونتسيزي + 2;
عنصر.أسلوب.فونتسيزي = نيوفونتسيزي + "بكسل";
}
، والتي سوف تتلقى العنصر مع معرف
النص