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