کلمات کلیدی و متون monospace

کلمات کلیدی و متون monospace

تغییر جالبی در کلمات کلیدی و متون monospace برای سایز فونت و وراثت وجود دارد که زمانی که شما در مرورگر متون monospace رو مشاهده می کنید٬ نمایان گر می شود. به قطعه کد و عکس زیر توجه کنید:

ٖp {font-size: medium;}   /* the default value */
    span {font-family: monospace; font-size: 1em;}

 

<p>This is a 'p' with a <span>'span'</span> inside.</p>

کلمات کلیدی و متون monospace

مقدار پیش فرض medium معمولا ۱۶px در نظر گرفته می شود. فرض کنید که کاربر تنظیمات مرورگر را تغییر نداده است‌ ( سایز پیش فرض تنظیم شده است ). در واقع شما پاراگراف ها ی خارج از عنصر span را با سایز فونت ۱۶px مشاهده می کنید. ( تکرار می کنم٬‌ فرض بر این است که کاربر تنظیمات فونت را دستکاری نکرده است. )

در واقع اگر شما در پاراگراف خارج از span سایز فونت رو بررسی کنید٬ به مقدار محاسبه شده ی ۱۶ پیکسل می رسید.

بنابراین شما طبیعتا انتظار دارید که عنصر span هم سایز ۱۶px رو داشته باشه. حدس شما درست است.  در اکثر مرورگر ها همین اتفاق می افتد اما در تعدادی دیگر٬ عنصر span به جای ۱۶px دارای سایز ۱۳px می باشد.

بدین ترتیب تگ  span با font-size: medium شروع می کند. نشان دهنده این است که اولویت کاربر با این است که سایز مناسبی را برای متن قرار دهد و این که اکثر مرورگر ها برای مقدار پیش فرض متون monospace مقدار ۱۳ پیکسل را قرار داده اند. به همین دلیل آن ها متن monospace در والد ۱۶ پیکسلی را با مقدار ۱۳ پیکسل نمایش می دهند با این که متون monospace صریحا با مقدار سایز ۱em تعریف شده است.

p {font-size: medium;}   /* the default value */
  span {font-family: monospace; font-size: 2em;}

 

<p>This is a 'p' with a <span>'span'</span> inside.</p>

 

در این مثال متن monospace به جای مقدار ۳۲ پیکسل با مقدار ۲۶ پیکسل نمایش داده می شود.( دوباره تاکید می کنم با فرض این که تنظیمات پیش فرض مرورگر تغییر نکرده باشد.)

توجه کنید که همه ی مرورگرها همین رفتار رو ندارند.

راهی وجود داره برای این مشکل برای همه مرورگرها. به قطعه کد زیر توجه کنید:

p {font-size: medium;}   /* the default value */
   span {font-family: monospace, serif; font-size: 1em;}

 

<p>This is a 'p' with a <span>'span'</span> inside.</p>

 

کلمه serif رو می بینید که در این جا اضافه شده است؟!

این یک راهی است که با یک سوئیچ باعث میشه که همه ی مرورگرها با font-size:1em به صورت ۱۰۰ درصد برای محاسبه سایز فونت رفتار کنند نه مقدار نشات گرفته از medium. این برای تمام مرورگرها هم سازگار است.

کلمات کلیدی و متون monospace

تطبیق سایز monospace

 

خب٬‌ مبحث امروز هم به پایان رسید.

امیدوارم که لذت برده باشید.

موفق و موید باشید.

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *