حجم الخط هو أحد العناصر المهمة لتصميم الويب الذي يحدد سهولة قراءة صفحة الويب وقابليتها للاستخدام. في كس ، يتم تعيين حجم الخط باستخدام خاصية حجم الخط. تتيح لك هذه الخاصية تعيين حجم الخط بالبكسل أو النسب المئوية أو وحدات القياس النسبية أو استخدام كلمات رئيسية مثل المتوسطة والصغيرة وما إلى ذلك.
على سبيل المثال ، لتعيين حجم الخط بالبكسل ، يمكنك استخدام بناء الجملة التالي:
محدد {
حجم الخط: 16 بكسل;
}
يمكنك أيضا استخدام وحدات القياس النسبية مثل إم و ريم. واحد م يعادل حجم الخط الحالي للعنصر الأصل ، بينما يستخدم ريم حجم خط العنصر الجذر (عادة ما يتم تعيينه في المتصفح).
هناك العديد من الأساليب التي يمكن استخدامها لتغيير حجم الخط على صفحة الويب. على سبيل المثال ، يمكنك تطبيق حجم الخط على جميع العناصر من نوع معين باستخدام محدد العلامات ، أو تغيير الحجم لعنصر معين فقط باستخدام محدد الفئة أو المعرف.
- تحديد حجم الخط المغلق
- تحديد حجم الخط
- وحدات حجم الخط
- وحدات القياس النسبية
- وحدات القياس المطلقة
- تعيين حجم الخط على عناصر هتمل
- تحديد حجم الخط باستخدام محددات كس
تحديد حجم الخط المغلق
| الممتلكات | المعنى | الوصف |
|---|---|---|
| حجم الخط | القيمة | يحدد حجم الخط بالبكسل أو النسب المئوية أو وحدات القياس الأخرى المقبولة. |
| ضبط حجم الخط | العدد | يحدد نسبة ارتفاع الخط في العنصر بناء على القيمة المحددة. |
| امتداد الخط | عادي / ضيق / واسع | … | يحدد درجة التمدد أو ضغط الخط. |
فيما يلي أمثلة على استخدام هذه الخصائص:
ص {
حجم الخط: 16 بكسل ؛ / * ضبط حجم الخط بالبكسل */
حجم الخط: 1 م; / * تحديد حجم الخط في م (نسبة إلى العنصر الأصل) */
حجم الخط: 100 ٪ ؛ / * تعيين حجم الخط كنسبة مئوية (نسبة إلى حجم الخط افتراضيا) */
حجم الخط: أكبر ؛ / * زيادة حجم الخط بمستوى واحد */
حجم الخط: أصغر ؛ / * تقليل حجم الخط بمستوى واحد */
}
}
ح2 {
بالإضافة إلى تعيين حجم الخط ، يمكنك أيضا استخدام خصائص أخرى لتغيير مظهره ، على سبيل المثال ، وزن الخط لتعيين محتوى الدهون أو نمط الخط لتعيين النمط (الإمالة ، التسطير ، إلخ.).
باستخدام مجموعات مختلفة من هذه الخصائص ، يمكنك تحقيق النتيجة المرجوة وإنشاء تصميم صفحة ويب جذابة وقابلة للقراءة.
تحديد حجم الخط
يلعب حجم خط صفحة الويب دورا مهما في عرضها المرئي وسهولة استخدام المحتوى. لتحديد حجم الخط في كس ، يتم استخدام وحدة القياس "بكسل" (بكسل) أو وحدة القياس النسبية "الكسور العشرية من الحجم النسبي" (إم).
وحدة القياس "بكسل" (بكسل) مطلقة ويحدد حجم الخط في القيم الثابتة. على سبيل المثال ، تعني القيمة "12 بكسل" أن حجم الخط سيكون 12 بكسل. عند استخدام وحدة القياس هذه ، من المنطقي مراعاة أن الخط سيتم عرضه بنفس الطريقة على جميع الأجهزة ولن يتم قياسه اعتمادا على إعدادات المستخدم.
- حجم الخط: 16 بكسل;
- }
- يمكنك أيضا استخدام وحدات قياس أخرى ، مثل النسب المئوية ( ٪ ) و "النقاط" (نقطة) وغيرها ، لتعيين حجم الخط بشكل أكثر دقة.
- سيسمح لك اختيار حجم الخط الصحيح ووحدة القياس الخاصة به بإنشاء تطبيق ويب أو صفحة ويب مريحة وقابلة للقراءة سيتم تكييفها مع مختلف الأجهزة وإعدادات المستخدم.
- وحدات حجم الخط
- عند تعيين حجم الخط في كس ، يمكنك استخدام وحدات قياس مختلفة. يحددون كيفية قياس حجم الخط ، وبالتالي كيف سيبدو على الشاشة.
- فيما يلي بعض وحدات حجم الخط الأكثر شيوعا:
بكسل (بكسل): هذه هي وحدة القياس الأكثر استخداما. يقوم بتعيين حجم الخط بالبكسل ، مع 1 بكسل يساوي بكسل واحد على الشاشة. على سبيل المثال,
حجم الخط: 16 بكسل;
يحدد حجم الخط إلى 16 بكسل.
النسب المئوية ( ٪ ): تحدد وحدة القياس هذه حجم الخط بالنسبة للعنصر الأصلي أو الحاوية. على سبيل المثال ، إذا كان العنصر الأصل يحتوي على حجم خط 12 بكسل وتم تعيين حجم الخط كـ
حجم الخط: 150%;
، ثم سيكون حجم الخط 18 بكسل.
نظم الإدارة البيئية (م): هذه وحدة قياس تحدد حجم الخط بالنسبة لحجم خط العنصر الأصل. على سبيل المثال ، إذا كان العنصر الأصل يحتوي على حجم خط 14 بكسل ، وتم تعيين حجم الخط كـ
حجم الخط: 1.2 م;
ثم سيكون حجم الخط 16.8 بكسل.
الأحجام النسبية: بالإضافة إلى وحدات القياس المذكورة أعلاه ، يمكنك أيضا استخدام قيم نسبية أخرى مثل
صغير
,
متوسطة
,
كبير
، إلخ. يتم تعيين القيم المحددة لهذه الأحجام النسبية بواسطة المتصفح وقد تختلف من متصفح لآخر.
عند اختيار وحدة قياس لحجم الخط في كس ، من المهم أن نضع في اعتبارنا أنها يمكن أن تؤثر ليس فقط على حجم النص ، ولكن أيضا إدراكه من قبل المستخدم. لذلك ، يوصى باختيار وحدات القياس التي تضمن قابلية قراءة جيدة للنص وتكون أكثر توافقا مع الأجهزة والمتصفحات المختلفة.
وحدات القياس النسبية
يمكن استخدام كل من وحدات القياس المطلقة والنسبية لتحديد حجم الخط في كس. دعونا نلقي نظرة فاحصة على وحدات القياس النسبية.
- يتم تعيين قيمة حجم خط الريم بالنسبة لحجم خط العنصر الجذر (عادة ما تكون علامة). على سبيل المثال ، إذا تم تعيين حجم خط عنصر الجذر على 16 بكسل ، فستكون قيمة الريم بقيمة 2 32 بكسل.
- فولكس فاجن-يتم تعيين قيمة حجم الخط بالنسبة لعرض نافذة العرض. على سبيل المثال ، سيكون 1 فولت واط مساويا لـ 1 ٪ من عرض إطار العرض.
- تعد وحدات القياس النسبية مفيدة بشكل خاص عند إنشاء صفحات ويب سريعة الاستجابة ، لأنها تتيح لك تكييف أحجام الخطوط تلقائيا مع الشاشات والأجهزة المختلفة.
وحدات القياس المطلقة
تسمح لك وحدات القياس المطلقة في كس بتعيين أبعاد العناصر على صفحة ويب باستخدام قيم ثابتة. إنها مستقلة عن العناصر الأخرى في الصفحة ولها معنى ثابت بغض النظر عن السياق.
هناك العديد من وحدات القياس المطلقة التي يمكن استخدامها في كس:
بكسل (بكسل): البكسل هو أصغر جسيم للعرض على الشاشة ، لذا فإن البكسل هي الطريقة الأكثر دقة وموثوقية لتعيين حجم العناصر. على سبيل المثال ، لتعيين حجم الخط إلى 16 بكسل ، يمكنك استخدام القيمة "16 بكسل".
النقاط (نقطة): النقطة هي وحدة قياس مطلقة أخرى تستخدم لتعيين حجم الخط. 1 نقطة حوالي 1/72 من البوصة. يمكن تعيين قيمة الخط في الفقرات ، على سبيل المثال ، كـ "12 نقطة".
البوصة (بوصة): البوصة هي وحدة قياس تساوي 1/12 من القدم أو حوالي 2.54 سم. إذا كنت بحاجة إلى تعيين حجم العنصر بالبوصة ، فيمكنك استخدام قيمة مثل "2 بوصة".
المليمتر (مم): المليمتر هو وحدة قياس تساوي 1/1000 متر أو حوالي 0.039 بوصة. لتعيين حجم عنصر بالملليمتر ، يمكنك استخدام قيمة ، على سبيل المثال ، "10 مم".
سم (سم): السنتيمتر هو وحدة قياس تساوي 1/100 متر أو حوالي 0.394 بوصة. يمكن تعيين حجم العنصر بالسنتيمتر باستخدام قيمة ، على سبيل المثال ، "5 سم".
عند استخدام وحدات القياس المطلقة ، ضع في اعتبارك أنه قد يتم عرض أبعاد العناصر بشكل مختلف على الأجهزة والشاشات المختلفة. هذا بسبب الاختلافات في كثافة البكسل وعوامل أخرى.
- في هتمل ، هناك عدة طرق لتعيين حجم الخط على عناصر هتمل التي ستساعدنا على تحقيق التأثير المرئي المطلوب.
- حجم الخط: 14 بكسل;
- وحدات القياس النسبية متوفرة أيضا في كس ، والتي تسمح لك بتعيين حجم الخط بالنسبة للعناصر الأخرى على الصفحة. على سبيل المثال:
- فولكس فاجن
- يتم تعيين حجم الخط كنسبة مئوية من عرض نافذة المتصفح.