CSS: font Size

-

من خلال هذه الخاصية يمكن التحكم في حجم الخط في CSS ، 

تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:

نبدأ بإنشاء ملف HTML باسم  TextFontStyle وبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    <style>
        p.size1 {
           
            font-family: "Times New Roman", Times, serif;
            font-size: 40px;
           }
           p.size2 {
           
           font-family: "Times New Roman", Times, serif;
           font-size: 50px;
          }
          p.size3 {
           
           font-family: "Times New Roman", Times, serif;
           font-size: 15px;
          }
         
    </style>
<body>
<html>  
    <p class="size1">مرحبا بكم </p>
    <p class="size2">مرحبا بكم </p>
    <p class="size3">مرحبا بكم </p>
    
  </div>                  
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)


 طيب نفهم الكود:
الكود التالي يعمل على إعطاء حجم يساوي 40 بكسل وسيتم تطبيقه على elements التي لها class باسم size1 :
 font-size: 40px;




تمام طريقة الكتابة بتكون بالشكل: 
font-size: value
القيم الي مكن تطبيقها باستخدام size هي :
الفرق بين px و em
كل 1em يعادل 16px
في حال لم يتم تحديد حجم الخط فسيتم عرض الحجم الافتراضي الذي يساوي 16px=1em ، هذا يعني ان 1em يساوي الحجم الافتراضي الحالي
يمكن الحصول على قيمة em من خلال تطبيق المعادلة :  
Em=pixels/16
يتميز em بانه يعطي مرونة اكثر عند التعامل مع المتصفحات بحيث يسمح بتغيير حجم النصـ لذا يعتر من الأفضل التعامل مع هذ النوع بدل البيكسل
امثلة 
قيمة ثابتة
span { font-size: 14px; }
نسبة مئوية 
p { font-size: 90%; }
استخدام كلمات معرفة مسبقا 
p { font-size: x-small; }
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}


Responsive Font Size

للتحكم بحجم الخط بحيث يكون متغير حسب حجم الشاشة يمكن استخدام  وحدة vw والتي تعني "viewport width".
نطبق مثال حتي نفهم : 
اضف الكود التالي : 
<!DOCTYPE html>
<html>
    <style>
        p.size1 {
            font-family: "Times New Roman", Times, serif;
            font-size:10vw;
           }
           p.size2 {
           font-family: "Times New Roman", Times, serif;
           font-size:5vw;
          }
          p.size3 {
           font-family: "Times New Roman", Times, serif;
           font-size:5vw;
          }
    </style>
<body>
<html>  
    <p class="size1">مرحبا بكم </p>
    <p class="size2">مرحبا بكم </p>
    <p class="size3">مرحبا بكم </p>
  </div>                  
</body>
</html>
ثم شغل الصفحة وحاول تغير حجم المتصفح اكيد بتشوف ان الحجم بكبر وبصغر حسب حجم الشاشة.