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