در این مطلب قصد داریم نحوه تغییر فونت متون با استفاده از css را توضیح دهیم.
یکی از property هایی که برای تغییر فونت وجود دارد، font-family است.
به تکه کد زیر توجه کنید:
p{
font-family: Arial,Tahoma;
}
در تکه کد بالا گفته شده است، بیا و فونت تمام تگ های p را به آریال تغییر بده. در صورتی هم که به هر دلیلی فونت آریال در دسترس نبود، فونت تاهوما را برای این تگ ها در نظر بگیر.
در جلوی font-family میتوان :
- نام فونت
- نوع فونت
p{
font-family: Serif;
}
در تکه کد بالا گفتیم، بیا و با توجه به فونت های موجود در سیستم کاربر، فونتی از نوع serif را برای تگ های p در نظر بگیر.
در تصویر بالا، به خوبی متوجه تفاوت بین فونت های serif و sans-serif میشویم.
فونت دلخواه:
@font-face{
font-family: shabnam;
src: url('http://example.com/shabnam.woff');
}
p{
font-family: shabnam,Tahoma;
}
در کد بالا با استفاده از @font-face گفته ایم، نام فونت مورد نظر ما را شبنم قرار بده، و آدرس اینترنتی آن را نیز برابر با example.com/shabnam.woff قرار بده.
در جلوی font-family نام فونت را مینویسیم و در جلوی src، در تابع url آدرس فونت را مینویسیم.
حالا هر تگ یا المنتی را که میخواهید فونت آن مثلا به شبنم تغییر کند، font-family آن را برابر با نام فونت قرار دهید.
به همین سادگی!
در تصویر زیر، انواع فرمت فونت ها، و پشتیبانی مرورگرها از این فرمت ها نمایش داده شده است.
