تعد قراءة النص أحد الجوانب المهمة لتصميم الويب. لكي يتمكن المستخدمون من قراءة المحتوى على موقعك بشكل مريح ، تحتاج إلى منحهم الفرصة لضبط حجم الخط وفقا لاحتياجاتهم. للقيام بذلك ، يمكنك استخدام البرامج النصية الجاهزة على صفحات الموقع التي تسمح لك بتعيين وتغيير حجم الخط بناء على طلب المستخدم.
واحد من هذه البرامج النصية هو جافا سكريبت حجم الخط مبدل. يسمح هذا البرنامج النصي للمستخدم بتحديد أحد أحجام الخطوط المحددة مسبقا أو تعيين حجمها يدويا. إنه سهل الاستخدام ومناسب لأنواع مختلفة من المواقع. لجعله يعمل ، وهو ما يكفي لإضافة بضعة أسطر من التعليمات البرمجية إلى ملف هتمل من موقعك.
برنامج نصي آخر مفيد لتغيير حجم الخط هو زومتكست.شبيبة
. يسمح للمستخدمين بتوسيع نطاق نص الصفحة ، سواء على أجهزة الكمبيوتر المكتبية أو على الأجهزة المحمولة. يتم تثبيت هذا البرنامج النصي عن طريق إضافة بضعة أسطر من التعليمات البرمجية إلى رمز هتمل الخاص بك. يوفر هذا البرنامج النصي المرونة للمستخدمين لزيادة أو تقليل حجم النص على موقعك.
يسمح لك كلا النصين بزيادة حجم الخط وتقليله على الموقع لتحسين إمكانية قراءة المحتوى. سوف يساعدون الزوار على ضبط حجم الخط وفقا لتفضيلاتهم وميزاتهم المرئية. لا تنس دعم المستخدمين ذوي الإعاقة من خلال منحهم الفرصة لتكبير الخط على موقعك.
- لماذا من المهم تعيين وتغيير حجم الخط على الموقع
- كيفية اختيار البرنامج النصي المناسب لتعيين حجم الخط
- البرامج النصية لتعيين الخط كنسبة مئوية
- البرامج النصية لتعيين الخط بالبكسل
- البرامج النصية لتغيير حجم الخط على الموقع
- أمثلة على استخدام البرامج النصية لتعيين وتغيير حجم الخط
- كيفية التحقق من البرامج النصية لتحديد وتغيير حجم الخط
لماذا من المهم تعيين وتغيير حجم الخط على الموقع
أول شيء يهتم به زائر الموقع هو حجم النص. إذا كان النص صغيرا جدا ، فسيكون من الصعب على المستخدم قراءة المحتوى ، مما قد يزعجه ويزيد من انطباعه عن الموقع ككل. يمكن لبعض المستخدمين زيادة حجم الصفحة يدويا ، ولكن هذا ليس متاحا دائما أو مناسبا للقيام به.
على العكس من ذلك ، يمكن أن يتسبب النص الكبير جدا أيضا في ظهور انطباع سلبي. يمكن أن تشغل الأحرف الكبيرة مساحة كبيرة على الشاشة ، مما يؤدي إلى تضييق مجال الرؤية ويتطلب مزيدا من التمرير للصفحة لقراءة النص.
بالإضافة إلى ذلك ، قد يكون لدى المستخدمين تفضيلات وخصائص بصرية مختلفة. قد يحتاج بعض الأشخاص إلى حجم خط أكبر لقراءة مريحة بسبب التغيرات المرتبطة بالعمر في الرؤية أو الخصائص الفيزيائية الأخرى. قد يفضل البعض الآخر حجم خط أصغر لتوفير مزيد من المعلومات على الشاشة.
لذلك ، عند تصميم موقع على شبكة الإنترنت ، من المهم توفير إمكانية تثبيت وتغيير حجم الخط. يمكن تنفيذ ذلك باستخدام أنماط ومخطوطات كس المناسبة على الموقع. يتيح تزويد المستخدمين بالقدرة على ضبط حجم الخط لهم اختيار الخيار الأفضل لأنفسهم بشكل مستقل ، مع مراعاة تفضيلاتهم وخصائص الرؤية.
وبالتالي ، يعد تعيين وتغيير حجم الخط على الموقع جانبا مهما من جوانب التصميم ، والذي يوفر سهولة الاستخدام والقراءة المريحة للمستخدمين ، مع مراعاة تفضيلاتهم الفردية وخصائص الرؤية.
كيفية اختيار البرنامج النصي المناسب لتعيين حجم الخط
عند اختيار برنامج نصي لتغيير حجم الخط على موقع ويب ، يجب مراعاة عدة عوامل رئيسية:
1. وظائف:
من المهم تحديد الميزات التي تحتاجها. تسمح لك بعض البرامج النصية بتغيير حجم النص داخل الموقع بأكمله ، بينما يسمح لك البعض الآخر بتغيير حجم عناصر معينة فقط. تقرر ما تحتاجه واختيار البرنامج النصي التي من شأنها تلبية الاحتياجات الخاصة بك.
2. التوافق:
تأكد من أن البرنامج النصي المحدد متوافق مع موقعك والتقنيات المستخدمة عليه. قد لا تعمل بعض البرامج النصية على متصفحات معينة أو مع إصدارات معينة من لغة الترميز.
3. سهولة الاستخدام:
راجع وثائق وأمثلة استخدام البرنامج النصي المحدد. تأكد من أنه يدمج بسهولة في موقعك واستخدامه لن يسبب صعوبات.
4. الموثوقية:
إيلاء الاهتمام لمراجعات وتقييمات البرنامج النصي المحدد. إذا تم استخدامه على نطاق واسع وتلقى ردود فعل إيجابية من مستخدمين آخرين ، فقد يشير ذلك إلى موثوقيته وجودته.
باختصار ، يعد اختيار البرنامج النصي المناسب لتعيين حجم الخط على الموقع خطوة مهمة يجب القيام بها بعناية ووعي. ضع في اعتبارك احتياجاتك ومتطلباتك للوظائف والتوافق مع موقعك وسهولة الاستخدام وموثوقية البرنامج النصي.
البرامج النصية لتعيين الخط كنسبة مئوية
غالبا ما يحتاج مطورو الويب إلى تعيين حجم الخط على الموقع كنسبة مئوية لضمان القدرة على التكيف وقراءة النص على الأجهزة المختلفة. يمكن استخدام نصوص جافا سكريبت المختلفة لهذه المهمة.
، والتي تأخذ وسيطة مع النسبة المئوية لتغيير الخط وتطبقها على العنصر المحدد:
لاستخدام هذه الوظيفة ، يجب عليك تحديد معرف العنصر الذي تريد تطبيق تغيير حجم الخط عليه. يستخدم هذا المثال عنصر مع معرف 'مياليمنت'.
لتغيير حجم الخط بنسبة 150٪ ، يمكنك استدعاء الوظيفة على النحو التالي:
إذا كنت بحاجة إلى تطبيق تغيير على عناصر متعددة في نفس الوقت ، فيمكنك تغيير رمز الوظيفة على النحو التالي:
في هذه الحالة ، يجب تحديد فئة العناصر التي تريد تطبيق تغيير حجم الخط ، في هذا المثال ، يتم استخدام فئة 'ميليمنتس'.
وبالتالي ، تتيح لك البرامج النصية لتعيين الخط كنسبة مئوية التحكم بمرونة في حجم النص على الموقع وضمان سهولة القراءة المثلى على الأجهزة المختلفة.
البرامج النصية لتعيين الخط بالبكسل
هنا مثال على برنامج نصي جافا سكريبت الذي يحدد حجم الخط بالبكسل:
في هذا المثال ، قمنا بتعيين حجم الخط إلى 16 بكسل لجميع العناصر في الصفحة مع فئة" حجم الخط". يمكنك تغيير قيمة متغير فونتسيزي إلى أي عدد آخر من بكسل ، اعتمادا على احتياجاتك.
يمنحك استخدام وحدات البكسل لتعيين حجم الخط تحكما دقيقا في شاشته ، ولكنه قد يؤدي إلى مشاكل في إمكانية الوصول ، حيث لن يتمكن المستخدمون من تغيير حجم الخط باستخدام إعدادات المتصفح الخاصة بهم.
يفضل بعض مطوري الويب استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م ، للسماح بإعدادات حجم الخط الأكثر مرونة. ومع ذلك ، لا يزال استخدام وحدات البكسل طريقة شائعة وسهلة لتعيين حجم الخط على موقع الويب.
البرامج النصية لتغيير حجم الخط على الموقع
قد توفر مواقع الويب القدرة على تغيير حجم الخط بحيث يمكن للمستخدمين تخصيص عرض النص وفقا لتفضيلاتهم. غالبا ما يتم استخدام نصوص مختلفة لهذا الغرض.
تتمثل إحدى أسهل الطرق لتنفيذ تغييرات حجم الخط في استخدام زري" تكبير "و" تصغير". من خلال النقر على هذه الأزرار ، يجب تنفيذ البرنامج النصي المقابل.
وثيقة.الجسم.أسلوب.حجم الخط = (حجم التيار + 1) + "بكسل";
}
}
يحصل على حجم الخط الحالي لجسم المستند ، ويزيده بمقدار 1 بكسل ويطبق التغيير باستخدام الخاصية
وثيقة.الجسم.أسلوب.فونتسيزي
. ومع ذلك ، تجدر الإشارة إلى أن بعض عناصر الصفحة قد يكون لها حجم خط ثابت ، ولن يؤثر تغييرها على هذه العناصر.
- هناك طريقة أخرى لتغيير الخط وهي استخدام شريط التمرير. يمكن للمستخدم تحريك شريط التمرير إلى اليسار أو اليمين لتقليل حجم الخط أو زيادته. لتنفيذ هذه الوظيفة ، تحتاج إلى استخدام برنامج نصي يتعامل مع أحداث تغيير موضع شريط التمرير وتطبيق تغييرات حجم الخط.
- وثيقة.الجسم.أسلوب.حجم الخط = القيمة + "بكسل";
مثال على برنامج نصي لتغيير حجم الخط باستخدام شريط التمرير:
تغيير الدالة حجم الخط (القيمة) {
}
- في هذا المثال ، الدالة
- تغيير حجم الخط (القيمة)
- يأخذ قيمة موضع شريط التمرير ويضبطه على أنه حجم الخط في نص المستند.
- يرجى ملاحظة أن هذه البرامج النصية توضح المبادئ الأساسية لتغيير حجم الخط على الموقع. قد تحتوي التطبيقات الحقيقية على رمز إضافي للتعامل مع المواقف الأخرى وتأخذ في الاعتبار عوامل مختلفة مثل إمكانية الوصول وقابلية الوظائف.
- أمثلة على استخدام البرامج النصية لتعيين وتغيير حجم الخط
- تغيير حجم الخط باستخدام الأزرار:
- أضف الزرين " + " و " - " إلى موقعك واربط البرامج النصية بهما والتي ستزيد أو تنقص حجم الخط.
- باستخدام شريط التمرير:
أضف شريط تمرير إلى موقع الويب الخاص بك واستخدمه لتغيير حجم الخط. إقران موقف المنزلق مع تغيير الخاصية المغلق حجم الخط لضبط حجم النص.