حمیدرضا سلیمیان

بلاگ شخصی حمیدرضا سلیمیان

دسته بندی مقالات
باهم در شبکه های اجتماعی !

فونت فارسی در وب ونکاتی درباره استفاده از font-face

فونت فارسی در وب ونکاتی درباره استفاده از font-face

چرا فونت ؟

الان جوری شده که نوع فونت می تونه بیانگر شخصیت اون سایت باشه و از جهتی دیگر نبود تنوع در فونت های استاندارد وب مخصوصا فارسی که عملا به فونت tahoma ختم میشه باعث شده که توی این چند ساله شاهد ورود فونت های فارسی در وب باشیم . توی همین مقاله در مورد fontFace ، نحوه پشتیبانی مرورگر ها و در اخر هم سایت های ارائه دهنده فونت های فارسی توضیحاتی رو میدم

از نحوه استفاده از font-face@

fontface یک قانون @ دار css هست پس اولین کار اینکه چجوری ازش استفاده کنیم

@font-face {
font-family: 'B yekan';

src:url("fonts/BYekan.ttf") format("truetype") ,
 url('http://ifont.ir/eot/BYekan.eot?#') format('eot'),
 url('http://ifont.ir/otf/byekan.otf') format('opentype'), 
 url(data:application/octet-stream;base64,) format('woff'),
 url('http://ifont.ir/svg/byekan.svg') format('svg');  

font-weight:normal;
}

body {
font-family:'B yekan',tahoma, Arial;
font-size:13px;
}

font-family در @font-face اسم اون فونت رو مشخص می کنه اسم میتونه از حروف کوچیک و بزرگ به همراه کارکتر space و حتی بدون تک کوتیشن باشه ، براس استفاده فونت باید دقیقا همون اسم رو بنویسید یعنی
مرحله بعدی مشخص کردن فایل اون فونته ، مرورگر ها هر کدوم از یک یا چند فرمت پشتیبانی می کنن که توی قیمت بعد میگم هر مرورگر چه فرمتی رو پشتیبانی میکنه
برای بارگزاری فونت دو روش وجود داره
1: آدرس مستقیم ، که شما آدرس مستقیم فایل فونت رو میدید مثال بالا آدرس مستقیم داده
2: استفاده از data-uri ، که محتوای فونت رو داخل خود css میریزید برای این کار باید محتوای اون فایل با base64 کدگزاری کنید برای این کار سایت base64 encoder بکارتون میاد

@font-face {
	font-family: 'B yekan';
	src:url(data:application/octet-stream;base64,   محتوای کد شده
	) 

برای نمونه توی این لینک سایت آی فونت فونت b yekan رو به صورت بالا لود کرده
این روش خوبیه برای اینکه یک درخواست از طرف مرورگر کم میشه و تا css لود میشه فونت هم لود شده ولی حواستون باشه که فقط نوع ttf رو اینجوری داخل css بریزید و بقیه انواع فرمت ها رو به روش اول لود کنیدو حجم css رو بالا نبرید
یک نوع دیگه لود کردن لود به صورت محلی [local]که خیلی کم استفاده میشه

@font-face {
  font-family: MyHelvetica;
  src:	local("b yekan"),
  	local("B yekan"),
	local("byekan"),
  	src:url("fonts/BYekan.ttf") format("truetype") ,
  font-weight: bold;
}

به این صورت که مرورگر فونت های داخل سیستم رو چک میکنه و اگر با اون اسم داده شده وجود داشت فونت رو لود میکنه ، خوبیش اینکه اگر فونت توی سیستم کاربر باشه سریع لود میشه،بدیش اینکه باید اسم یا اسم های دقیق فونت رو دقیق بدید
توی قسمت src شما می تونید چندین روش رو بزارید و با کاما با هم جداشون کنید . این به این خاطر که فرمت های مختلفی برای فونت ها وجود داره که هر مرورگر یک یا چند تای از اونها رو لود میکنه ،توی قسمت بعدی نوع فرمتهای پشتیبانی شده توسط مرورگر ها رو میزارم

پشتیبانی مرورگر ها

فرمت استاندارد فرمت .ttf (True Type Font) هست و به زودی تمامی مرورگر ها از این فرمت پشتیبانی می کنن ولی فعلن :

  • گوگل کروم : ttf و SVG
  • فایرفاکس : otf و ttf
  •  
  • اپرا و سافاری : ttf , otf و SVG
  • اینترنت اکسپلورر (فاجعه وب ) : فقط eot و از نسخه 9 به بعد

برای مرورگر های تحت موبایل مثل سافاری باید فرمت SVG باشه
برای تبدیل فرمت ها میتونید از سایت روبرو استفاده کنید : handy webfont generator

سایت های فونت فارسی

سایت هایی هستند گوشه کنار وب و لی این سه تا سایتی هست که من خودم ازشون استفاده می کنم خوبیشون هم اینکه فونت ها رو روی سایت خودشون میزبانی می کنن

نام
ایمیل
متن نظر
عبارت داخل تصویر
 
احمد
۱۳۹۳/۰۱/۲۰ ۱۲:۰۳
عالی بود
reza
۱۳۹۴/۰۲/۱۵ ۲۲:۵۶
سلام، فونت های قالب من خیلی دیر لود میشن اگه میتونید کمکم کنید :( در حین لود شدن هم سه بار فونت عوض میشه!!!!
▬▬حمیدرضا سلیمیان
۱۳۹۴/۰۳/۱۹ ۱۸:۱۵
شما می تونید سورس فونتتون رو به صورت base64 بزارید داخل css که یکجا لود بشه و یا اینکه فایل فونت رو داخا هاست خودتون بزارید چون بعضی موقه ها سایت های مرجع فونت مخصوصا گوگل فونت خیلی دیر برای ما ایرانیها لود میشه اگر سوال دیگه ای بود بپرسید