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