تعریف فونت دلخواه با font-face در CSS
لزوم داشتن یک وب سایت جذاب، داشتن UI جذاب و حرفه ای است. یکی از موارد موثر در UI صفحات وب، فونت است. تعریف فونت دلخواه برای صفحات وب، با font-face در CSS امکان پذیر است.
در صورتی که فونت دلخواه ما در فونت های پیشفرض سیستم عامل وجود نداشته باشد و ما بخواهیم فونت دلخواه خود را برای صفحات وب اضافه کنیم، باید از عبارت font-face استفاده کنیم.
ساختار دستور font-face در CSS
@font-face{
font-family:'fontName';
src: url('fontAddress') format('truetype')
,url('fontaddress' format('eot')
,url('fontadress') format('woff')
}با عبارت font-family برای فونت دلخواه خود یک نام دلخواه وارد می کنیم در خانواده فونت ها با آن نام شناخته می شود.
در عبارت های url آدرس فونت مد نظر به همراه نام فایل و نوع پسوند آن باید وارد شود. مثلاً اگر نام فایل فونت من Byekan باشد باید آن را به صورت: Byekan.ttf وارد کنم.
با عبارت format فرمت فونت را تعیین می کنیم. فرمت های فونت چهار نوع هستند:
1- مرورگر IE از از فونت های با فرمت eot پشتیبانی می کنند.
2- پسوندهای otf و ttf برای فونت های سیستمی است. مخفف این عبارات به ترتیب از چپ: True Type format , Open Type Format می باشد.
3- دستگاه های اپلی از فرمت SVG پشتیبانی می کنند. البته از نسخه IOS 5 به بعد این دستگاه ها از پسوند Woff هم پشتیبانی می کنند.
نسخه های پشتیبانی شده توسط مرورگرها از فرمت Woff متفاوت است.
بیشتر بخوانید: کلاس و id در css
حال می خواهیم یک فونت دلخواه برای صفحه وب خود که نام آن index است، تعریف کنیم. برای چنین منظوری یک صفحه ی HTML را در نظر بگیرید که به این صورت است:
<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>صفحه اصلی</title> </head> <body> <h2>آوا سورس</h2> <p> آوا سورس منبع فروش پروژه های برنامه نویسی و آموزش زبان های برنامه نویسی است. </p> </body> </html>
می خواهیم فونت دلخواهی را به این صفحه با font-face در css تعریف کنیم. فایل های فونت دلخواه را آماده کنید و در مسیر همان فایل html داخل پوشه ای با نام fonts قرار دهید.
فونتی که من انتخاب کردم فونت Vazir است.
دوباره یک فایل Css به پروژه اضافه کنید. نام فایل را من style.css گذاشتم.
کدهای زیر در فایل css قرار دارد:
@font-face {
font-family: vazir;
src: local(vazir);
src: url("Fonts/Vazir.eot") format('eot')
,url("Fonts/Vazir.ttf") format('truetype')
,url("Fonts/Vazir.Woff") format('woff');
}
body{
font-family: vazir;
}با عبارت loacl ، اگر فونت مورد نظر در سیستم کاربر وجود داشته باشد، دیگر فایل های فونت از روی سرور لود نمی شوند.
اما تا به الان هیچ چیزی تغییر نکرده است و باید فایل style.css را به صفحه html لینک کنیم.
با تگ link می توانیم این عمل را انجام دهیم. تگ link باید بین تگ شروع و پایانی Head قرار بگیرد.
<head> <meta charset="UTF-8"> <title>صفحه اصلی</title> <link href="style.css" rel="stylesheet" type="text/css"> </head>
فونت صفحه وب با استفاده از عبارت font-face به فونت vazir تغییر یافت.
دیدگاهتان را بنویسید