انتخاب یک اندازه

پس از انتخاب سبک فونت برای استفاده، مرحله بعدی تصمیم گیری در مورد اندازه فونت است.

مرورگرها دارای اندازه های داخلی برای جداسازی سطوح مختلف سرصفحه و همچنین متن استاندارد هستند.

با این حال، می توانید با استفاده از اندازه فونت آن را تغییر دهید.

ویژگی:

اندازه فونت: اندازه;

شما فکر می کنید تعیین اندازه فونت آسان است، اما CSS3 در واقع به شما امکان می دهد اندازه را در یکی از پنج روش مختلف مشخص کنید:

»»به عنوان یک واحد اندازه گیری مطلق

»»به عنوان یک واحد نسبی اندازه گیری

»»به عنوان درصدی از فضای اختصاص داده شده به عنصر

»» استفاده از کلمه کلیدی اندازه

»»استفاده از کلمه کلیدی اندازه نسبت به فضای اختصاص داده شده به عنصر

شما واحدهای مطلق را با استفاده از یک مقدار اندازه خاص اندازه گیری مشخص می کنید.

برای پیچیده کردن حتی بیشتر، CSS به شما اجازه می دهد از شش واحد اندازه گیری مختلف استفاده کنید، که در جدول زیر نشان داده شده است.

centimeters   =   Cm

inches   =   In

milimerers   =   Mm

picas   =   Pc

points   =   Pt

pixels   =   px

سه واحد اندازه گیری اول نشان داده شده در جدول ، به راحتی قابل تشخیص هستند، اما سه مورد آخر چندان رایج نیستند.

6 پیکسل در یک اینچ و 72 نقطه در یک اینچ وجود دارد. واحد پیکسل در ابتدا با پیکسل های یک کامپیوتر استاندارد مطابقت داشت مانیتور، اما با پیشرفت تکنولوژی مانیتور، که اینطور نیست .

شما می توانید اندازه را با استفاده از یک عدد کامل یا یک مقدار اعشاری مشخص کنید:

font-size: 0.25in;

font-size: 48pt;

واحدهای نسبی اندازه گیری اندازه فونت را نسبت به سایر عناصر صفحه وب تعیین می کنند. جدول زیر واحدهای اندازه نسبی را در CSS3 نشان می دهد.

نسبت به اندازه فونت معمولی عناصر   =   Em

نسبت به ارتفاع معمولی اندازه فونت استفاده شده در حال حاضر   =   Ex

نسبت به ارتفاع عنصر ریشه   =   Rem

نسبت به 1% ارتفاع پنجره مرورگر   =   Vh

نسبت به 1٪ از عرض پنجره مرورگر   =   Vw

نسبت به 1% بزرگتر از عرض یا ارتفاع پنجره مرورگر   =   Vmax

نسبت به 1% کوچکتر از عرض یا ارتفاع پنجره مرورگر   =   Vmin

به عنوان درصدی از اندازه عنصر عادی   =   %

نسبت به اندازه کاراکتر صفر   =   ch

اندازه واحد نسبی em محبوب ترین است.اندازه عنصر را نسبت به متن موجود در صفحه وب اندازه می دهد.برای مثال، در اینجا یک قانون رایج وجود دارد که خواهید دید:

h1 {font-size: 2em;}

این به مرورگر می‌گوید که اندازه عنصر h1 را دو برابر اندازه متن در صفحه وب قرار دهد. با استفاده از واحدهای نسبی می توانید به راحتی اندازه عنوان ها را بر اساس اندازه تغییر دهید از متن در محتوا اگر تصمیم دارید اندازه فونت متن را در صفحه وب تغییر دهید، عنوان ها به طور خودکار اندازه تغییر می کنند تا به همان نسبت باقی بمانند.

برای ساده‌تر کردن کارها، CSS همچنین به شما امکان می‌دهد اندازه متن را با استفاده از یک قابل خواندن توسط انسان تنظیم کنید.

کلمات کلیدی مطلق و نسبی در دسترس هستند:

»»Absolute: xx-small, x-small, small, medium, large, x-large, xx-large

»»Relative: smaller, larger

استفاده از کلمات کلیدی تنظیم اندازه فونت را آسان تر می کند، اما شما هنوز کمی در این کار هستید. این به مرورگر بستگی دارد که تعیین کند چه چیزی کوچک است، فونت با اندازه متوسط یا بزرگ است.