يلعب الخط على الأجهزة المحمولة دورا مهما في إنشاء تجربة سهلة الاستخدام. لكن في بعض الأحيان قد يكون حجم الخط كبيرا جدا ويشغل مساحة إضافية على الشاشة. في مثل هذه الحالات ، تحتاج إلى معرفة كيفية تقليل حجم الخط على جهازك المحمول حتى يتمكن المستخدمون من قراءة المحتوى بشكل مريح.
يمكن أن يكون تقليل حجم الخط مفيدا عند تطوير تطبيقات الهاتف المحمول أو مواقع الويب. يمكن أن يساعد حجم الخط الصغير في توفير مساحة الشاشة وتحسين الجماليات المرئية العامة للواجهة. ومع ذلك ، ضع في اعتبارك أن حجم الخط الصغير جدا قد يجعل من الصعب على بعض المستخدمين القراءة.
قد تختلف طرق تقليل حجم الخط على جهاز محمول اعتمادا على المطور أو النظام الأساسي. فيما يلي بعض الطرق الشائعة التي يمكن أن تساعد في تحديد حجم الخط المطلوب على جهاز محمول.
- طرق تقليل حجم الخط على جهاز محمول
- استخدام " ريم "بدلا من"بكسل"
- إزالة الأحرف والمسافات غير الضرورية
- استخدام الخطوط المضغوطة
- استخدام استعلامات الوسائط
- تحديد عدد الخطوط لكل صفحة
- استخدام خطوط بديلة
طرق تقليل حجم الخط على جهاز محمول
هناك عدة طرق يمكن استخدامها لتقليل حجم الخط على الأجهزة المحمولة:
- باستخدام وحدات القياس النسبية. بدلا من حجم الخط الثابت (على سبيل المثال بكسل) ، يمكنك استخدام النسب المئوية ( ٪ ) ، وحدات النسبية (إم أو ريم) ، أو وحدات الطباعة (فولكس فاجن أو ف). يسمح هذا للخط بالتكيف مع حجم الشاشة والجهاز الذي يتم عرضه عليه.
- استخدام استعلامات الوسائط. تسمح لك استعلامات الوسائط بتطبيق أنماط كس مختلفة اعتمادا على الجهاز ومعلماته ، مثل عرض الشاشة أو كثافة البكسل. يمكنك تكوين استعلامات الوسائط لتقليل حجم الخط على الأجهزة المحمولة بحيث يكون أكثر قابلية للقراءة وممتعة للمستخدمين.
- باستخدام جافا سكريبت. باستخدام جافا سكريبت ، يمكنك تغيير حجم الخط ديناميكيا بناء على إعدادات الجهاز أو تفضيلات المستخدم. على سبيل المثال ، يمكنك كتابة وظيفة تحدد نوع الجهاز ونمط العرض ، ثم تغيير حجم الخط وفقا لذلك.
يعتمد اختيار طريقة تقليل حجم الخط على الأجهزة المحمولة على الموقف المحدد ومتطلبات المشروع. من المهم أن تتذكر أن الخط يجب أن يكون صغيرا بما يكفي للقراءة ، ولكن في نفس الوقت واضح ومميز بدرجة كافية. سيساعد هذا المستخدمين على استخدام موقع الويب بشكل مريح على أجهزتهم المحمولة.
استخدام " ريم "بدلا من"بكسل"
عند تقليل حجم الخط على جهاز محمول ، يوصى باستخدام وحدات قياس نسبية مثل" ريم "(الجذر إم) بدلا من وحدات القياس المطلقة مثل" بكسل " (بكسل).
تعتمد وحدة القياس "ريم" على حجم خط عنصر جذر هتمل ، كقاعدة عامة ، يتم تعيين هذا على 16 بكسل. هذا يعني أنه إذا كان حجم خط العنصر الجذر هو 16 بكسل ، فسيكون 1 "ريم" 16 بكسل.
يتيح لك استخدام "حركة العين السريعة" إنشاء تصميم أكثر مرونة واستجابة ، حيث سيتم قياس حجم الخط تلقائيا اعتمادا على حجم الشاشة أو تفضيلات المستخدم.
لتعيين حجم الخط باستخدام "ريم" ، تحتاج إلى إضافة القاعدة التالية إلى كس:
أتش تي أم أل { حجم الخط: 16 بكسل؛}
هنا ، تشير القيمة" 16 بكسل " إلى حجم خط عنصر الجذر. ثم يمكنك استخدام " ريم " لتعيين حجم الخط في عناصر أخرى:
ف { حجم الخط: 1 ريم؛}
في هذه الحالة ، سيكون حجم الخط في الفقرات 16 بكسل ، لأن 1 "ريم" يتوافق مع حجم خط العنصر الجذر.
باستخدام " ريم "بدلا من" بكسل " يجعل من السهل تغيير حجم الخط في جميع أنحاء الموقع عن طريق تغيير قيمة الخط فقط للعنصر الجذر ، دون الحاجة إلى إجراء تغييرات على كل عنصر على حدة. هذا يوفر الوقت ويبسط صيانة الموقع.
إزالة الأحرف والمسافات غير الضرورية
يمكنك أيضا إزالة الأحرف غير الضرورية مثل علامات الترقيم أو الأحرف الخاصة. على سبيل المثال ، يمكنك استخدام التعبيرات العادية لحذف جميع الأحرف باستثناء الأحرف والأرقام. في جافا سكريبت ، يمكن القيام بذلك باستخدام طريقة الاستبدال() والتعبيرات العادية.
إذا كنت بحاجة إلى تقليل حجم الخط على الصفحة بأكملها ، فيمكنك استخدام خاصية كس بحجم الخط وتعيين قيمة أصغر ، على سبيل المثال ، حجم الخط: 12 بكسل. يمكنك أيضا استخدام وحدات حركة العين السريعة أو إم لتعيين حجم الخط النسبي.
استخدام الخطوط المضغوطة
يسمح لك ضغط الخط بتقليل حجمه دون خسارة كبيرة في الجودة. يتم تحقيق ذلك عن طريق إزالة بعض البيانات غير الضرورية وتحسين الترميز. يتم تحميل الخطوط المضغوطة بشكل أسرع ، مما يساعد على تحميل صفحة الويب بشكل أسرع.
هناك العديد من تنسيقات الخطوط المضغوطة التي يمكن استخدامها على الأجهزة المحمولة. بعض منهم تشمل:
| الشكل | الوصف |
|---|---|
| ووف | تنسيق الخط المفتوح على شبكة الإنترنت (وف) هو تنسيق خط مضغوط مصمم للاستخدام في صفحات الويب. وهو مدعوم من قبل معظم المتصفحات الحديثة ويقدم نسبة حجم نوعية جيدة. |
| 2 | ووف 2 هو تنسيق خط مضغوط جديد يوفر ضغطا محسنا مقارنة مع ووف. يوفر أحجام ملفات أصغر مع الحفاظ على جودة عالية. |
| الصندوق | تروتايب الخط (تف) هو تنسيق الخط التي وضعتها أبل ومايكروسوفت. على الرغم من أنه غير مضغوط ، يمكن ضغط خطوط الصناديق بكفاءة باستخدام ضغط غزيب عند إرسالها عبر شبكة. |
لاستخدام الخطوط المضغوطة على الأجهزة المحمولة ، يمكنك تضمين ملفات الخطوط المناسبة في صفحة الويب الخاصة بك باستخدام علامة. على سبيل المثال:
يوصى أيضا باستخدام الخدمات التي تضغط الخطوط تلقائيا قبل إرسالها إلى الأجهزة المحمولة. يمكنهم المساعدة في تحسين الحجم وتسريع تحميل الخط على صفحة الويب.
يمكن أن يؤدي استخدام الخطوط المضغوطة على الأجهزة المحمولة إلى تقليل حجم صفحة الويب بشكل كبير وتحسين أدائها. طريقة التحسين هذه مفيدة بشكل خاص للأجهزة المحمولة ذات الوصول المحدود إلى الإنترنت أو الاتصال البطيء.
استخدام استعلامات الوسائط
تتيح لك استعلامات الوسائط التحكم في عرض المحتوى على الأجهزة المحمولة. إنها تسمح لك بتغيير حجم الخط وموقع العناصر والمعلمات الأخرى اعتمادا على حجم الشاشة.
يتم تطبيق استعلامات الوسائط باستخدام كس. لتقليل حجم الخط على جهاز محمول ، يمكنك استخدام التعليمات البرمجية التالية:
@الوسائط (أقصى عرض: 480 بكسل) {
الجسم {
حجم الخط: 14 بكسل;
}
}
في هذا المثال ، استخدمنا استعلام وسائط بشرط أن يكون الحد الأقصى لعرض الشاشة 480 بكسل. داخل استعلام الوسائط ، حددنا قاعدة لعنصر باسم خاصية حجم الخط وقيمة مختصرة تبلغ 14 بكسل.
وبالتالي ، عند عرض الموقع على جهاز محمول بعرض شاشة أقل من 480 بكسل ، سيتم تطبيق قيمة الخط المحددة ، مما يقلل حجمه على جهاز محمول.
تتيح لك استعلامات الوسائط إنشاء قواعد مختلفة للأجهزة وأحجام الشاشة المختلفة ، مما يحسن بشكل كبير تجربة المستخدم وسهولة استخدام صفحة الويب على الأجهزة المحمولة.
تحديد عدد الخطوط لكل صفحة
يمكن أن يؤثر الاستخدام المفرط للخطوط المختلفة على صفحة الويب سلبا على تحميلها وعرضها على الأجهزة المحمولة.
عند استخدام عدد كبير جدا من الخطوط على الصفحة ، يستغرق المتصفح وقتا أطول لتنزيلها من خوادم الجهات الخارجية. قد يتسبب هذا في تحميل الصفحة ببطء وزيادة وقت انتظار المستخدم.
بالإضافة إلى ذلك ، يحتوي كل خط على ملف خاص به مع الأحرف والحجم ، مما قد يزيد من إجمالي كمية البيانات التي تم تنزيلها. إذا كان المستخدم يستخدم جهازا محمولا به حركة مرور محدودة على الإنترنت ، فقد يؤدي عدد كبير من الخطوط إلى استنفاده السريع.
تتمثل إحدى طرق تحسين تحميل الخط وعرضه على الأجهزة المحمولة في استخدام عدد محدود من الخطوط في كل صفحة.
عند تطوير صفحة ويب ، يوصى بالحد من استخدام خطين أو ثلاثة من أنماط مختلفة (على سبيل المثال ، عادي ، غامق ومائل). سيؤدي ذلك إلى تقليل كمية البيانات التي تم تنزيلها وتسريع تحميل الصفحة على الأجهزة المحمولة.
استخدام خطوط بديلة
هناك العديد من الخطوط خفيفة الوزن والمدمجة التي هي مناسبة تماما للاستخدام على الأجهزة النقالة. بعض منهم تشمل روبوتو ، فتح بلا ، لاتو و حزب العمال بلا. تحتوي هذه الخطوط على ارتفاع أقل للملف الشخصي وعرض الحرف ، مما يسمح لك بعرض المزيد من النص على الشاشة ، حتى عند استخدام حجم خط أصغر.
لاستخدام الخطوط البديلة على موقع الويب الخاص بك ، وهو ما يكفي لربطها باستخدام الخاصية كس @الخط الوجه. سيسمح هذا للمتصفح بتنزيل الخط المطلوب من الخادم وتطبيقه على النص الموجود على الصفحة.
تدعم بعض الأجهزة المحمولة أيضا ميزات الخط الإضافية مثل الضغط أو تمثيل المتجه. يمكن أن تساعد هذه الوظائف في تقليل حجم الخط بشكل أكبر وتسهيل القراءة على شاشة الجهاز المحمول.