حجم الخط هو سمة مهمة لتصميم موقع الويب. يحدد حجم النص الذي سيتم عرضه على الشاشة. هناك عدة طرق لتعيين حجم الخط في كس ، وفي هذا الدليل التفصيلي سننظر في كل منها.
واحدة من أسهل الطرق لتعيين حجم الخط هو استخدام وحدات القياس المطلقة مثل بكسل (بكسل) أو نقاط (بت). على سبيل المثال ، يمكنك تعيين حجم الخط بالبكسل على النحو التالي: حجم الخط: 16 بكسل؛. ومع ذلك ، باستخدام الوحدات المطلقة ، سيتم الحفاظ على حجم الخط على جميع الشاشات ، مما قد يؤدي إلى مشاكل في قابلية القراءة على الأجهزة المحمولة.
وهناك طريقة أكثر مرونة هي استخدام وحدات القياس النسبية مثل النسب المئوية ( ٪ ) ، م (م) أو حجم الخط الجذر (ريم). على سبيل المثال ، يمكنك تعيين حجم الخط كنسبة مئوية من حجم العنصر الأصل على النحو التالي: حجم الخط: 120٪؛. يتيح لك ذلك إنشاء تصميمات سريعة الاستجابة حيث يتغير حجم الخط تلقائيا اعتمادا على حجم الشاشة.
من المهم اختيار حجم الخط الصحيح بحيث يكون النص قابلا للقراءة وممتعا للعين. لا تنس الخصائص الفريدة لموقعك على الويب والجمهور الذي تستهدف المحتوى إليه. تذكر أن حجم الخط الصحيح يمكن أن يحسن بشكل كبير من إدراك المعلومات.
وأخيرا ، تذكر أن حجم الخط في كس يمكن أن تكون موروثة من العنصر الأصل. إذا كنت بحاجة إلى تغيير حجم الخط لجزء معين من النص ، فيمكنك استخدام المحددات وميراث النمط.
- كيفية تحديد حجم الخط في كس: دليل كامل
- وحدات الخط في المغلق
- كيفية تعيين حجم الخط بالبكسل
- تطبيق وحدات الخط النسبية
كيفية تحديد حجم الخط في كس: دليل كامل
في كس (أوراق الأنماط المتتالية) ، يمكنك تحديد حجم النص باستخدام خاصية حجم الخط. تتيح لك هذه الخاصية تعيين حجم الخط بالبكسل أو النقاط أو النسب المئوية أو وحدات القياس الأخرى. في هذا الدليل ، سننظر في طرق مختلفة لتحديد حجم الخط في كس.
1. تعيين حجم الخط بالبكسل: لتعيين حجم الخط بالبكسل ، استخدم بناء الجملة التالي:
| بناء الجملة | مثال | الوصف |
|---|---|---|
| حجم الخط: حجم بكسل; | حجم الخط: 16 بكسل; | يحدد حجم الخط بالبكسل. على سبيل المثال ، 16 بكسل. |
2. تحديد حجم الخط بالنقاط: لتعيين حجم الخط بالنقاط (1 نقطة = 1/72 بوصة) ، استخدم بناء الجملة التالي:
| بناء الجملة | مثال | الوصف |
|---|---|---|
| حجم الخط: حجم الخط; | حجم الخط: 12 نقطة; | يحدد حجم الخط في النقاط. على سبيل المثال ، 12 نقطة. |
3. تعيين حجم الخط كنسبة مئوية: لتعيين حجم الخط كنسبة مئوية بالنسبة إلى حجم الخط الافتراضي ، استخدم بناء الجملة التالي:
| بناء الجملة | مثال | الوصف |
|---|---|---|
| حجم الخط: الحجم%; | حجم الخط: 150%; | تعيين حجم الخط كنسبة مئوية نسبة إلى حجم الخط الافتراضي. على سبيل المثال ، سيزيد 150٪ من حجم الخط بمقدار مرة ونصف. |
4. تحديد حجم الخط في وحدات القياس الأخرى: في كس ، يمكنك أيضا تعيين حجم الخط في وحدات القياس الأخرى ، مثل إم ، ريم ، فولكس فاجن ، ف ، الخ. كل وحدة من وحدات القياس هذه لها خصائصها وتطبيقاتها الخاصة. يمكنك معرفة المزيد عنها في وثائق كس.
أخيرا ، عند اختيار حجم خط لموقعك على الويب ، ضع في اعتبارك إمكانية قراءته وإمكانية الوصول إليه للمستخدمين. تذكر أيضا أنه يمكن ضبط حجم الخط ليس فقط على مستوى العنصر ، ولكن أيضا على مستوى الحاوية أو المستند ككل.
وحدات الخط في المغلق
عند تعيين حجم الخط في كس ، يمكنك استخدام وحدات قياس مختلفة. كل واحد منهم لديه ميزة خاصة به ومناسبة لحالات معينة.
يحدد حجم الخط إلى 16 بكسل.
يحدد حجم الخط إلى 24 بكسل (150 ٪ من 16 بكسل).
يزيد حجم الخط بنسبة 20 ٪ من حجمه الأصلي.
يمكنك أيضا استخدام وحدات القياس النسبية في كس ، مثل بكسل النسبية (ريم) وعرض العرض (فو). حركة العين السريعة هي وحدة قياس تعتمد على حجم خط عنصر الجذر (عادة ما يكون). تعتمد فولكس فاجن على عرض المنطقة المرئية للمتصفح. يتيح لك استخدام هذه الوحدات إنشاء صفحات ويب سريعة الاستجابة حيث يتم تحجيم أحجام الخطوط والعناصر تلقائيا.
يعتمد اختيار وحدة الخط على أهداف ومتطلبات المشروع. الوحدات المطلقة أكثر ملاءمة لبعض الحالات ، في حين أن الوحدات النسبية أكثر ملاءمة للآخرين. من المهم أن تتذكر أنه عند اختيار حجم الخط ، يجب عليك التأكد من سهولة قراءة الموقع وقابليته للاستخدام. يوصى أيضا بالتحقق من مظهر صفحة الويب على الأجهزة المختلفة ودقة الشاشة للتأكد من أن أحجام الخطوط تبدو صحيحة ويتم عرضها بشكل صحيح.
كيفية تعيين حجم الخط بالبكسل
. لتعيين حجم خط معين بالبكسل ، تحتاج إلى تحديد قيمة الخاصية مساوية للعدد المطلوب من وحدات البكسل.
على سبيل المثال ، إذا كنت تريد تعيين حجم الخط إلى 16 بكسل ، فاستخدم التعليمات البرمجية التالية:
حجم الخط: 16 بكسل;
وبالتالي ، سيتم عرض كل النص داخل عنصر بهذا النمط بحجم خط 16 بكسل.
يمكن أن تكون قيمة حجم الخط بالبكسل إما عددا صحيحا أو عددا كسريا. على سبيل المثال:
حجم الخط: 14.5 بكسل;
سيقوم هذا النمط بتعيين حجم الخط على 14.5 بكسل.
عند استخدام حجم الخط بالبكسل ، من المهم أن تضع في اعتبارك أن إعداد حجم الخط هذا مطلق. هذا يعني أن حجم الخط سيكون هو نفسه لجميع الأجهزة والشاشات ، مما قد يؤدي إلى إزعاج الأجهزة ذات كثافات البكسل المختلفة.
يوصى باستخدام وحدات القياس النسبية ، مثل النسب المئوية أو م ، بحيث تتكيف الخطوط مع شاشات مختلفة.
تطبيق وحدات الخط النسبية
يحتوي كس على العديد من وحدات القياس النسبية التي تسمح لك بتعيين حجم الخط بناء على الحجم الحالي للعنصر الأصلي أو إعدادات المتصفح. إنها أكثر مرونة وقابلية للتكيف من وحدات القياس المطلقة مثل وحدات البكسل أو النقاط.
فيما يلي بعض وحدات القياس النسبية الأكثر شيوعا المستخدمة لتعيين حجم الخط:
- ، ثم سيكون حجم خط العنصر الفرعي 1.2 * 14 = 16.8 بكسل.
- ، ثم سيكون حجم خط هذه العناصر 1.5 * 16 = 24 بكسل.
- ، ثم سيكون حجم خط العنصر الفرعي 1.5 * 16 = 24 بكسل.
يتيح لك استخدام وحدات القياس النسبية إنشاء تصميمات تكيفية ومرنة يمكن قياسها بسهولة إلى أحجام مختلفة للشاشة وإعدادات المستخدم.