يلعب الخط دورا مهما في التصميم المرئي لصفحات الويب ، وفي بعض الأحيان قد يكون من الضروري زيادة حجمه. قد يكون هذا بسبب أسباب مختلفة: قد يعاني الشخص من مشاكل في الرؤية ، أو يستخدم جهازا بشاشة صغيرة ، أو يفضل ببساطة أحجام خطوط أكبر لسهولة القراءة. في هذه المقالة ، سنلقي نظرة على ست طرق بسيطة لزيادة الخط في موقع ويب أو قالب مدونة.
- 1. باستخدام أنماط كس الخاصة
- 2. باستخدام وحدات القياس إم أو ريم
- 3. باستخدام متصفح التكبير
- 4. استخدام جافا سكريبت لتغيير الخط ديناميكيا
- 5. استخدام تكبير الخط المدمج في القالب
- 6. استخدام التقنيات المساعدة
- باستخدام كس
- تغيير إعدادات الخط في القالب
- حجم الخط: 20 بكسل;
- } يمكنك أيضا تطبيق القيم النسبية لتغيير حجم الخط. على سبيل المثال ، سيزيد الكود التالي الخط بنسبة 20 ٪ بالنسبة للحجم الحالي:
- الجسم {
- حجم الخط: 120%;
} إذا كنت بحاجة إلى زيادة الخط أو تقليله فقط لكتلة معينة من النص ، فيمكنك استخدام علامة متداخلة بالنمط المناسب. على سبيل المثال:
نص بخط مكبر.
للحصول على إعدادات الخط أكثر تعقيدا ، يمكنك استخدام ورقة الأنماط (كس) ، الذي يحدد جميع المعلمات اللازمة لعناصر النص من القالب. على سبيل المثال ، لا يغير الكود التالي حجم الخط فحسب ، بل يتغير لونه أيضا:
الجسم {
الخط الأسرة: أريال ، بلا الرقيق;
حجم الخط: 16 بكسل;
اللون: # 333333;
}
ح1 {
حجم الخط: 20 بكسل;
} من خلال تجربة إعدادات الخط المختلفة في ملف كس ، يمكنك تحقيق النوع المطلوب من النص في القالب.
زيادة حجم الخط تدريجيا فيما يلي الخطوات التي ستسمح لك بتنفيذ مثل هذه الزيادة:
إنشاء عنصر هتمل الذي تريد تغيير حجم الخط.
إضافة فئة كس إلى هذا العنصر لتحديد حجم الخط الأولي.
استخدم جافا سكريبت لتغيير حجم الخط تدريجيا.
تحديد قيمة حجم الخط الأولي في فئة كس.
- يمكن تغيير استخدام جافا سكريبت لتغيير خط صفحة الويب ديناميكيا باستخدام لغة برمجة جافا سكريبت. هذا يجعل من السهل تغيير الخطوط ، بما في ذلك حجمها. فيما يلي بعض الأمثلة على كيفية القيام بذلك: 1. وثيقة.جيتليمنتبيد: يمكنك استخدام طريقة جيتليمنتبيد للوصول إلى عنصر هتمل بواسطة معرفه الفريد. ثم يمكنك تعيين حجم خط جديد باستخدام النمط.فونتسيزي الملكية.
- دع العناصر = المستند.الحصول على عناصرالاسم العام ('ميكلاس');
- }
إلى عن على (دعني = 0; أنا < عناصر.الطول ؛ أنا {) {
عناصر [أنا].قائمة الفصل.إضافة ('لارجيفونت');عنصر.أسلوب.حجم الخط = '20 بكسل' ؛ 6. نمط مضمن: أخيرا ، يمكنك تغيير حجم الخط عن طريق تطبيق النمط المضمن مباشرة على العنصر باستخدام خاصية النمط.
دع العنصر = المستند.جيتليمينتبيد ('مياليمنت');
عنصر.أسلوب.حجم الخط = '20 بكسل' ؛ باستخدام هذه الطرق ، يمكنك تغيير حجم الخط ديناميكيا على صفحة الويب الخاصة بك باستخدام جافا سكريبت.
استخدام المكونات الإضافية والإضافات لتكبير الخط إذا كنت تريد تكبير الخط على موقعك ، فيمكنك استخدام العديد من المكونات الإضافية والإضافات. سيقومون بتبسيط عملية الإعداد والسماح للمستخدمين باختيار مستوى تكبير الخط الأكثر ملاءمة لهم. فيما يلي بعض الإضافات والإضافات الشائعة:
حجم الخط السهل: يتيح هذا المكون الإضافي للمستخدمين زيادة أو تقليل الخط على موقعك باستخدام شريط أدوات تفاعلي.تكبير النص فقط: هذا امتداد متصفح يسمح لك بتكبير النص فقط على صفحة الويب دون التأثير على بقية العناصر.
используется следующий код:مغير حجم الخط: باستخدام هذا المكون الإضافي ، يمكن للمستخدمين تغيير حجم الخط على موقعك عن طريق الاختيار من بين عدة خيارات.تبديل حجم الخط: يتيح هذا المكون الإضافي للمستخدمين التبديل بين عدة أحجام خطوط محددة مسبقا. أنظمة إدارة المحتوى الأكثر شعبية ، مثل وورد أو جملة ، وتقديم الإضافات الخاصة بهم وملحقات لتكبير الخط. سيساعد استخدام هذه الأدوات في جعل موقعك أكثر سهولة وسهولة في الاستخدام للمستخدمين الذين لديهم احتياجات تكبير مختلفة للخط.
زيادة تدريجية في حجم الخطاستخدام الإضافات والإضافات لتكبير الخط
2. باستخدام وحدات القياس إم أو ريمبدلا من استخدام وحدات البكسل أو النسب المئوية ، يمكنك أيضا استخدام وحدات إم أو ريم. هذه الوحدات هي نسبة إلى حجم الخط من العنصر الأصل ، لذلك عند تغيير حجم الخط من الأصل ، وجميع العناصر التي يتم حجمها في إم أو ريم أيضا تغيير حجمها. يمكن أن يكون هذا مفيدا إذا كنت تريد تغيير حجم كل المحتوى على الصفحة مرة واحدة.
3. باستخدام متصفح التكبيرتحتوي جميع متصفحات الويب الحديثة على وظيفة تكبير تتيح لك زيادة حجم الخط وعناصر الصفحة الأخرى. ويمكن القيام بذلك باستخدام مفاتيح الجمع كترل + " + "، كترل + " - " أو باستخدام عجلة الماوس مع مفتاح كترل باستمرار. ومع ذلك ، لا تنس أن المستخدمين الذين يعانون من ضعف البصر قد يستخدمون هذه الميزة بالفعل ، ويجب أن يكون القالب متاحا بدونها.
4. استخدام جافا سكريبت لتغيير الخط ديناميكيا
إذا كنت بحاجة إلى منح المستخدمين القدرة على التحكم ديناميكيا في حجم الخط ، فيمكنك استخدام جافا سكريبت. ويمكن القيام بذلك باستخدام وظائف دوم مثل جيتليمنتبيد أو كويريسلكتور للعثور على العناصر المطلوبة وتغيير حجم الخط اعتمادا على رغبة المستخدم.
- 5. استخدام تكبير الخط المدمج في القالب
- تحتوي بعض القوالب والسمات بالفعل على ميزات تكبير الخط المضمنة التي تسمح للمستخدمين بتنشيط هذه الميزة بنقرة واحدة. عادة ما يتم تمثيل ذلك بواسطة رمز " + "أو الزر" أأ " في الرأس أو على جانب الصفحة. إذا كان القالب الخاص بك لا يدعم هذه الميزة ، يمكنك إضافته بنفسك باستخدام جافا سكريبت أو كس.
- 6. استخدام التقنيات المساعدة
- أخيرا ، إذا كان المستخدم يعاني من مشاكل خطيرة في الرؤية ، فقد يحتاج إلى استخدام تقنيات مساعدة مثل قارئات الشاشة أو أجهزة التكبير. تسمح هذه التقنيات للمستخدم بالتحكم في حجم الخط والجوانب الأخرى للتصميم المرئي من أجل جعل الموقع أو المدونة في متناول المستخدم قدر الإمكان.
- إن زيادة حجم الخط ليست مجرد مسألة تفضيل شخصي ، بل هي جانب رئيسي من جوانب إمكانية الوصول إلى صفحة الويب. باتباع طرق بسيطة لزيادة الخط في القالب الخاص بك ، يمكنك جعل المحتوى الخاص بك أكثر قابلية للقراءة وفي متناول جميع المستخدمين.
- هناك عدة طرق لتغيير حجم الخط باستخدام كس:
استخدام العقار
حجم الخط: 16 بكسل;
حجم الخط: 120%;
يزيد من حجم الخط بنسبة 20٪.
استخدام كلمات رئيسية خاصة لحجم الخط ، مثل
كبير
. على سبيل المثال, بالإضافة إلى ذلك ، يمكنك تغيير حجم الخط فقط لعناصر معينة على صفحة الويب. يتم استخدام محدد كس لهذا الغرض. على سبيل المثال ، لزيادة حجم الرؤوس فقط
، يمكنك كتابة رمز كس التالي:حجم الخط: 24 بكسل;
}أيضا ، العديد من القوالب الحديثة تستخدم ملفات كس لتحديد الأنماط. في هذه الحالة ، لتغيير حجم الخط ، تحتاج إلى العثور على الفئة أو المعرف المناسب في ملف كس وتغيير الخاصية حجم الخطالجسم {إذا كنت ترغب في تغيير حجم الخط لعناصر معينة فقط ، فيمكنك تطبيق رمز يحدد محدد عنصر معين. على سبيل المثال ، لتكبير الخط في العناوينح1 {
حجم الخط: 20 بكسل;
}
- يمكنك أيضا تطبيق القيم النسبية لتغيير حجم الخط. على سبيل المثال ، سيزيد الكود التالي الخط بنسبة 20 ٪ بالنسبة للحجم الحالي:
- الجسم {
حجم الخط: 120%;