آموزش استفاده از Web Font در CSS به زبان ساده
چگونه از Web Font در CSS استفاده کنیم؟ در گذشته ای نزدیک تمامی صفحات وب فارسی از فونت های انگلیسی مثل فونت tahoma استفاده می کردند که اصلا زیبا نبودند و اعداد آنها هم به شکل انگلیسی وارد می شد. اما یه چند سالی هست (از زمان آمدن CSS3)که ما در میان صفحات وب فونت های کاملا فارسی مشاهد می کنیم که جلوه ی فارسی تری به سایت می دهند.ما توی این آموزش می خواهیم یاد بگیریم که چطور از این امکان CSS استفاده کنیم.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
برای این کار من یک پروژه ی کوچیک درست می کنم.که در آن یک فایل index.html و فایل فونت مورد نظر وجود داره.
<!DOCTYPE html>
<head>
<style>
*{
margin:0;
padding:0;
}
body{
direction:rtl;
}
</style>
</head>
<html>
<body>
<p>این متن یک فونت فارسی دارد</p>
</body>
</html>
خروجی:
خب حالا کافی است که فونت خودم رو به CSS اضافه کنم.
@font-face {
font-family: BYekan;
src: url(BYekan.ttf);
}
در بخش font-family نامی که قرار است در صفحه ی CSS ، من از آن برای استفاده از Font قرار دهم و در بخش src آدرس فونت من قرار می گیرد.بعد از اتمام این کار فقط کافیه که شما فونت رو به المان مورد نظر بدید.
p{
font-family:BYekan;
}
فونت به صفحه تگ p داده شد . خروجی:
ولی کار تمام نشده ! از آنجایی که در نسخه های مختلف مرورگر های مختلف این امکان کمی تفاوت دارد ما می خواهیم برای محکم کار چند نوع از فونت خودمان را در CSS آدرس دهی کنیم تا مشکلی در load فونت پیش نیاید.برای تبدیل فونت به فرمت های مختلف شما می توانید از لینک زیر استفاده کنید:
من فونت با فرمت woff را هم به پوشه ی پروژه ام اضافه کردم . حالا کافی است که src را در کد font-face به شکل زیر تغیر دهیم:
src: url('BYekan.ttf') format('truetype'),
url('BYekan.woff') format('woff');
- نکته : در کد css جدید من قسمتی به نام format اضافه شد که جهت جلوگیری از مشکل در browser های مختلف است.
کار تمام شد و اکنون می توانید همه جای فایل پروژه ی خود از آن استفاده کنید. پارسا صفوی - توسینسو باشید!