به کارگیری فونت فارسی در وبسایت ها

یکی از قابلیت های خوب افزوده شده به CSS در نسخه 3، امکان استفاده از فونت هایی به غیر از فونت های پیش فرض وب نظیر Arial ، Tahoma و… است چرا که در وب به طور معمول تنها فونت های خاصی که در تمام سیستم عامل ها نصب و قابل اجرا هستند، پشتیبانی می شود و بقیه موارد متنون با فونتی به صورت پیش فرض (به طور مثال با فونت Arial) نمایش داده خواهند شد، از این رو توسعه دهنده گان CSS به فکر راه حل این مشکل افتادند تا اینکه در نسخه سه خاصیتی با نام font-face@ معرفی شد که این مشکل را رفع کرد.

بیان مسئله
در بحث استفاده از فونت هایی خارج از فونت های از پیش تعریف شده و و استاندارد وب در سایت یا وبلاگ خود، محدودیت هایی به خصوص در زبان فارسی وجود داشت. این مشکل با ارائه شدن نسخه 3 سی اس اس بر طرف شد و خاصیت font-face@ جهت رفع این نیاز مطرح گردید. البته استفاده از این خاصیت CSS زیاد هم آسان نبوده و یکسری ریزه کاری ها دارد که در این آموزش شرح داده می شوند. استفاده از font-face@ همانطور که می تواند به ما کمک کند تا از طیف وسیعی از فونت ها برای افزایش زیبایی متون بهره بگیریم می تواند موجب سنگینی و بالا رفتن حجم صفحه شود و در بارگزاری صفحه تاخیر به وجود آورد چرا که اکثر فونت ها معمولا حجمی بیش از 30 کیلوبایت دارند و این در مجموع باعث کندتر شدن سرعت بارگذاری صفحات می شود، البته شاید در نگاه اول این اندازه چندان به چشم نیاید، اما وقتی حجم سایر المان ها، استایل ها و فایل های جاوا اسکریپت احتمالی را به آن اضافه کنیم، در مجموع قالب سایت یا وبلاگ به اصطلاح سنگینی از لحاظ حجم خواهیم داشت، از طرفی در مورد فونت های فارسی، در برخی مرورگرها برای کاراکترهای خاصی هنوز مشکلاتی وجود دارد، لذا توصیه می شود از این قابلیت بر اساس نیاز و با سنجش سایر شرایط گفته شده استفاده شود.

آشنایی با font-face@ در CSS3
همان طور که گفتیم، خاصیت font-face@ برای پایان دادن به محدودیت استفاده از فونت های خاص در وب تعریف شده است، اما متاسفانه این خاصیت به طور کامل تنها در برخی مرورگر ها و در نسخه های به روزتر آنها پشتیبانی می شود (البته با روشی که در ادامه خواهیم دید، می توان با ترفندهایی در سایر مرورگرها نیز از آن استفاده کرد)، مرورگرهای فایرفاکس، اپرا، گوگل کروم و سافاری از این خاصیت به صورت پیش فرض پشتیبانی می کنند (از دو نوع فرمت ttf. یا TrueType و otf. یا OpenType)، مرورگر اینترنت اکسپلورر از نسخه 9 به بعد خاصیت font-face@ را پشتیبانی می کند (البته تنها از فونت های با فرمت eot. یا Embedded OpenType) و در نسخه های قدیمی تر باید متوصل به هک های css شویم، ضمن اینکه مرورگرهای جدید از فرمت دیگری با نام woff. یا (Web Open Font Format) نیز استفاده می کنند، لذا در مجموع برای اینکه فونت های فارسی در تمام مرورگرها به یک شکل دیده شوند، باید سه نوع فرمت متفاوت در دسترس مرورگر باشد (شامل فرمت ttf. یا otf.، فرمت eot. و فرمت woff.)؛ البته هر مرورگر تنها از یکی از این فونت ها استفاده و به اصطلاح آن را بارگذاری می کند، ذکر این نکته نیز ضروری است که پیش تر مرورگرهای سیستم عامل iOS تنها از فرمت svg. یا Scalable Vector Graphics استفاده می کردند (svg. در کارهای گرافیکی و ایجاد فونت استفاده می شود) که در نسخه های جدید، این استاندارد شامل فرمت ttf. هم شده است.

به طور کلی فرمت هایی که در بیشتر مرورگر ها تعریف شده است (به ترتیب چپ به راست) از قرار زیر اند:  

woff - ttf - otf - svg - eot

جدول زیر لیست مرورگرها و فونت های پشتیبانی شده توسط آنها را نشان می دهد.

تبدیل فرمت های فونت ها به یکدیگر
همان طور که در بالا ملاحظه کردید، برای نمایش صحیح فونت های فارسی در تمام مرورگرها، ناچارایم از چهار فرمت متفاوت استفاده کنیم؛ از آنجایی که در حالت معمول فونت های با پسوند ttf. در دسترس هستند، سایر فرمت ها را باید با تبدیل این فایل بدست آوریم، برای تبدیل این فرمت ها به یکدیگر چندین سرویس آنلاین در وب وجود دارد که البته در مورد فونت های فارسی، تنها برخی از آنها و آن هم از فرمت های خاصی پشتیبانی می کنند که چند مورد از آنها را برایتان در زیر قرار داده ایم:
سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (به جزء فرمت eot):

www.onlinefontconverter.com

سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (تنها فرمت eot.):

www.font2web.com

سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های انگلیسی :
   
www.fontsquirrel.com/fontface/generator

کافی است فونت ttf. را در این سرویس ها آپلود کنید تا در کم ترین زمان، فایل های مورد نیاز برای استفاده در وب را دریافت نمائید.

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

همچنین می توانید این مطلب را مطالعه کنید:
تبدیل فرمت فونت ها از TTF به EOT با سه کلیک

نحوه استفاده از font-face@
اکنون به سراغ کدنویسی CSS خواهیم رفت تا با کدهایی که فونت های متون شما را شخصی سازی میکنند آشنا شویم.ابتدا باید در استایل قالب فونت ها را به مرورگر معرفی کنید و سپس از آن در استایل مورد نظر استفاده کنید.

تعریف به مرورگر (فونت فرضی B Titr است):

@font-face {
font-family:'BTitr';
src:url('BTitr.eot');
src:local('bTitr'),
local('b Titr'),
url('BTitr.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8*/
url('BTitr.woff') format('woff'),/*مرورگر های جدید*/
url('BTitr.ttf') format('truetype'),/*تمام مرورگرها جز اکسپلورر*/
url('BTitr.svg#BYekan') format('svg');/*نسخه های قدیمی iOS*/
font-style:normal;
font-weight:normal;
}

حال می توان از نام تعریف شده برای فونت در طراحی قالب خود و استایل بندی استفاده کنیدو فقط به خاطر داشته باشید که فونت شما ابتدا باید برای مرورگر تعریف شود، سپس در ادامه استایل، قابل استفاده است، برای استفاده از فونت، کافی است نام آن را در قسمت font-family اضافه کنید:

@font-face {
 font-family:'BTitr';
 src:url('BTitr.eot');/*برای مرورگر اکسپلورر 9 به بعد*/
 src:local('bTitr'),
 local('b Titr'),/*برخی از مرورگرها  نظیر سافاری*/
 url('BTitr.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8*/
 url('BTitr.woff') format('woff'),/*مرورگر های جدید*/
 url('BTitr.ttf') format('truetype'),/*تمام مرورگرها جز اکسپلورر*/
 url('BTitr.svg#BYekan') format('svg');/*نسخه های قدیمی iOS*/
 font-style:normal;
 font-weight:normal;
}
.post-titr{
 font-family:BTitr, Tahoma, Geneva, sans-serif;
}
</style>

توضیح:
- ابتدا برای فونت خود یک نام به صورت دلخواه تعیین می کنیم تا در استایل css خود از آن استفاده کنیم.
- آدرس url فایل فونت خود را با فرمت eot. برای مرورگر اینترنت اکسپلورر 9 و مابعد مشخص می کنیم.
- در قسمت بعد، برای رفع مشکلات مرورگر اینترنت اکسپلورر 8 و ماقبل در این خصوص، از شیوه هک (با افزودن علامت های #?) استفاده می کنیم.
- عبارت local برای این است که اگر فونت مورد نظر در سیستم کاربر نصب بود، از همان فایل استفاده شود و محتوای اضافه از سرور دریافت نشود، دقت کنید که در این قسمت باید مشخصه شناسایی فونت درج شود که در بیشتر مرورگرها همان نام فایل است ولی در مرورگر سافاری، عنوان فونت باید درج شود (در بیشتر موارد نام فایل و عنوان فونت اندکی با هم تفاوت دارند).
- همان طور که در جدول بالا ملاحظه کردید، فایل ttf. در اکثر مرورگرها پشتیبانی می شود، لذا آن را نیز به استایل خود ضمیمه می کنیم (هر مرورگر بسته به سازگاری، به ترتیب، تنها از یکی از آدرس های src استفاده می کند). همچنین فایل svg را نیز برای سازگاری با نسخه های قدیمی سیستم عامل iSO ضمیمه می کنیم (این کار با توجه به حل مشکل پشتیبانی از فرمت ttf. در نسخه های جدید، ضروری نیست).