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