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