خواصی که برای فونت ها در CSS به کار می رود، نام فونت (خانواده فونت)، سایز، ضخامت و استایل متن است. تیم طراحی سایت اصفهان وب یار قصد دارد در این مقاله شما را با ویژگی های قابل تغییر فونت ها در CSS آشنا کند. با ما همراه باشید.
دسته بندی فونت ها
در CSS دو نوع خانواده برای فونت ها کاربرد دارد:
1) خانواده کلی (Gneric Family): گروهی از خانواده های فونت که ظاهری مشابه دارند (مثلاٌ همه به فرم Serif یا Monoscape هستند)
2) خانواده فونت (Font Family): یک نوع فونت مشخص (مانند Arial یا “B Yekan”)
تفاوت ظاهر فونت ها
معمولاً فونت ها (اغلب لاتین) به سه شکل تعریف و ساخته می شوند:
Serif – در انتهای حروف، خط کوتاهی مشاهده می شود.
Sans-Serif – کلمه Sans به معنی «بدونِ …» است. این گونه فونت ها، خط کوتاه یادشده را ندارند. خوانایی این نوع از فونت ها در صفحه کامپیوتر بیشتر از خانواده Serif است.
Monoscape – عرض تمام حروف در این حالت، یکسان است.
خانواده فونت (CSS Font Family)
نوع فونت یک متن، با دادن خاصیت font-familly به استایل CSS آن تعریف می شود. برای این خاصیت بهتر است بیشتر از یک فونت تعریف شود تا اگر مرورگری نتوانست یکی از آن ها را تشخیص دهد، فونت بعدی جایگزینش گردد.
با نام یک فونت شروع کنید و در انتها، خانواده کلی آن را بنویسید تا اگر سایر فونت ها در دسترس نبودند، مرورگر بتواند از آن خانواده کلی، فونتی را انتخاب کند و جایگزین نماید.
اگر نام یک فونت بیشتر از یک کلمه باشد، لازم است آن را داخل کوتیشن (‘ ‘) یا دابل کوتیشن (” “) قرار دهید. و فونت ها را با کاما از هم جدا کنید.
p { font-family: "Times New Roman", Times, serif; }
استایل نمایش فونت (Font Style)
خاصیت font-style بیشتر برای دادن حالت کج (italic) به متن استفاده می شود. مقدار پیش فرضش normal است که متن به صورت معمولی (غیر کج) دیده می شود و مقدار دیگری به نام oblique دارد که کمتر پشتیبانی می شود و بسیار مشابه italic است. مشاهده نمونه
سایز فونت (Font Size)
خاصیت font-size برای تعیین بزرگی و کوچکی فونت است. توانایی تغییر سایز فونت ها در طراحی وب بسیار حائز اهمیت می باشد. با این حال نباید به گونه ای سایز فونت ها را تغییر دهید که مثلاً پاراگراف ها اندازه هدینگ ها بزرگ شوند!
همیشه از تگ های مناسب استفاده کنید. از<h1> تا <h6> برای هدینگ ها و از <p> برای پاراگراف ها.
سایز فونت ها به دو صورت قابل اعمال است؛ مطلق (absolute) که به کاربر اجاز تغییر سایز فونت را در هیچ مرورگری نمی دهد و نسبی (relative) که در این حالت، سایز فونت به تناسب المان های اطرافش تغییر می کند و کاربران آزادانه می توانند سایز مورد نظرشان را برای هر فونتی تنظیم کنند.
اگر سایز فونت مشخص نشود، به طور پیش فرض برای متن های عادی (بدون تگ های html) مقدار 16px تنظیم می شود.
تنظیم سایز فونت ها با واحد em
بسیاری از توسعه دهندگان وب، برای این که کاربران به راحتی بتوانند سایز فونت ها را در همه مررگرها تغییر دهند، از واحد em به جای px استفاده می کنند. استفاده از این واحد از طرف W3C (کنسرسیوم جهانی وب) هم توصیه شده است.
هر em معادل یک برابر سایز فونت فعلی است. چون سایز پیش فرض 16px است، پس 1em = 16px می باشد. برای تبدیل px به em کافیست سایز پیکسل را بر 16 تقسیم کنید. (برای نمونه 18px = 18/16 em = 1.125 em )
برای اینکه سایز فونت انتخابی شما در همه مرورگرها یکسان دیده شود بهتر است چنین کدی بنویسید:
body { font-size: 100%; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.875em; }
p { font-size: 0.875em; }
ضخامت فونت (Font Weight)
با خاصیت font-weight تعیین شده و مقادیر عددی 100 تا 900 و bold، bolder، lighter و normal را به خود می گیرد. مشاهده نمونه
سایز فونت واکنشگرا (Responsive Font Size)
می توانید از واحد vw که مخفف Viewport Width (عرض صفحه، عرض پنجره مرورگر) است، برای ایجاد انعطاف در سایز فونت ها و سایر المان های html استفاده کنید. با این کار اگر عرض صفحه را کم و زیاد کنید، سایزها به طور خودکار به تناسب عرض صفحه نمایش مرورگر تغییر می کنند. هر یک vw معادل یک درصد از کل عرض صفحه است؛ برای مثال اگر عرض صفحه مرورگر 75cm باشد، 1vw = 0.75cm خواهد بود. مشاهده نمونه
شمایل فونت (Font Variant)
خاصیت font-variant که برای فونت های لاتین کاربرد دارد، مشخص می کند که بزرگی یا کوچکی حروف لاتین به چه صورت باشد. مقدار small-caps برای این خاصیت به این معنی است که حروف کوچک به بزرگ تبدیل شده اما سایزشان قدری کوچک تر شود.
سایر آموزش های مشابه را می توانید در کانال وب یار به نشانی webyar_net@ دنبال نمایید.
