فونت ها با فرمت های مختلف در css

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

انواع فرمت ها:

TTF: مخفف true type font است. این فرمت توسط شرکت مایکروسافت و اپل ایجاد شده و برای استفاده در محیط ویندوز و مک (اپل) مورد استفاده قرار می‌گیرد.
OTF: مخفف open type font است. این فرمت ساخته شده از فرمت TTF است که متعلق به مایکروسافت است. این فرمت هم بیشتر در سیستم های کامپیوتری مورد استفاده قرار می‌گیرد.
WOFF: مخفف کلمه web open font format است. و ترکیبی از دو فرمت OTF و TTF بصورت فشرده است. که برای استفاده در صفحات وب ایجاد شده است.
WOFF2: این فرمت در واقع همان WOFF است که با فشرده سازی بیشتر در اختیار کاربران قرار گرفته است.
SVG: مخفف scalable vector graphics است. این فرمت دارای سرعت فراخوانی زیاد نسبت به بقیه فرمت ها می‌باشد. که فقط توسط مرورگر safari اپل پشتیبانی می‌شود.
EOT: مخفف embeddedopen type است. این فرمت شکلی کامل از فرمت OTF است. و فقط در مرورگر اینترنت اکسپلورر پشتیبانی می‌شود.
حالا شاید سوال پیش بیاد که چرا باید از این فرمت ها در صفحه وب استفاده کنیم.
در واقع دلیل استفاده و اضافه کردن فونت ها با این فرمت ها این است که، فونت هایی که اضافه کردیم بطور کامل و با شکل صحیح خود روی متن ها و یا اعداد در صفحه وب و در تمامی مرورگر های بازدیدکنندگان نمایش داده شود. اما ممکن است فونت دلخواه شما با این فرمت ها وجود نداشته باشد که برای رفع این مشکل سرویس های آنلاین بسیار زیادی طراحی و توسعه داده شده که می‌توان با استفاده از این سرویس ها به راحتی فرمت های مربوطه را تبدیل کرد و از آنها در صفحات وب استفاده کرد.

نحوه اضافه کردن و مسیر دهی در css:

@font-face {
font-famiy:'iranyekanwebbold';
src: ulr("../fonts/eot/iranyekanwebbold.eot");
src: ulr("../fonts/svg/iranyekanwebbold(.svg") format('svg'),
     ulr("../fonts/ttf/iranyekanwebbold.ttf") format('ttf'),
     ulr("../fonts/woff/iranyekanwebbold.woff") format('woff'),
     ulr("../fonts/woff2/iranyekanwebbold.woff2") format('woff2');
}

@font-face {
font-famiy:'iranyekanweblight';
src: ulr("../fonts/eot/iranyekanweblight.eot");
src: ulr("../fonts/svg/iranyekanweblight.svg") format('svg'),
     ulr("../fonts/ttf/iranyekanweblight.ttf") format('ttf'),
     ulr("../fonts/woff/iranyekanweblight.woff") format('woff'),
     ulr("../fonts/woff2/iranyekanweblight.woff2") format('woff2');
}

@font-face {
font-famiy:'iranyekanwebregular';
src: ulr("../fonts/eot/iranyekanwebregular.eot");
src: ulr("../fonts/svg/iranyekanwebregular.svg") format('svg'),
     ulr("../fonts/ttf/iranyekanwebregular.ttf") format('ttf'),
     ulr("../fonts/woff/iranyekanwebregular.woff") format('woff'),
     ulr("../fonts/woff2/iranyekanwebregular.woff2") format('woff2');
}

body {
font-family: 'iranyekanwebregular';
}

1- در مرحله اول باید از مشخصه @font-face در css  برای تعریف فونت دلخواه خود اضافه کنیم.

2- در این مرحله ک نام دلخواه برای فونت انتخاب می‌کنیم. که این نام برای استفاده از فونت اضافه شده در تمامی صفحات وب است.(به عنوان مثال ما در نمونه کد بالا نام font-family خود را tik4 انتخاب کرده ایم ، شما میتوانید آن را به دلخواه تغییر دهید)

3- در مرحله سوم باید مسیر فونت و فرمت آن را مشخص کنیم.

نکته: برای استفاده از Font-Face ساخته شده در کلاس های Css از ;’font-family: iranyekanwebregular استفاده میکنیم و آن را فراخوانی میکنیم .

جدول زیر نشان می‌دهد هر فرمت فونت در چه مرورگرهایی پشتیبانی می‌شود:

مزایا و معایب فونت فارسی در وب

معمولا فونت های از پیش تعریف شده و استاندارد در وب برای زبان فارسی محدود است. و استفاده از سایر فونت های زیبا و متنوع برای خواناتر شدن متن ها بسیار مفید و است. اما اضافه کردن این فونت ها که معمولا حجم آن‌ها بیش از 30 کیلو‌بایت می‌باشد، باعث افزایش حجم صفحه وب می‌شود و ممکن است سرعت بارگذاری صفحه را به قدری کاهش دهد که مخاطب از این امر ناراضی باشد. شاید در نگاه اول این حجم زیاد به چشم نیاد، اما با توجه به وجود استایل ها و صفحات دیگر حجم قالب حجم سنگینی را به خود میگیرد. لذا طبق این آمار توصیه می‌شود از این قابلیت درصورت نیاز استفاده شود.

امیدوارم از مقاله فونت ها با فرمت های مختلف بهره کافی را برده باشید از طریق دیدگاه منتظر نظرات شما همراهان عزیز هستیم با تیک4 در ارتباط باشید.