تا به حال به تفاوت فونت ها با یکدیگر دقت کرده بودید؟ منظور ما تفاوت شکل و ظاهرشان و نوع تایپوگرافی آن ها نیست بلکه اینجا می خواهیم درباره تفاوت فرمت های فونت در طراحی سایت صحبت کنیم. در حال حاضر در بحث طراحی سایت استفاده از فونت های خودتان به جای فونت های پیشفرض سیستم راحت تر شده است اما همچنان جایی برای پیشرفت بیشتر هم دارد. در این مقاله قصد داریم درباره فرمت های مختلف فونت صحبت کنیم و به شما بگوییم که چگونه می توانید از آن ها استفاده کنید. در اینجا قصد داریم در واقع شما را بیشتر راهنمایی کنیم که کدام فونت برای سایت شما مناسب است و در آخر خودتان تصمیم بگیرید که لازم است از کدام فونت ها در طراحی سایت خودتان استفاده کنید. پس در این مقاله با ما همراه باشید.
میخوای بعدا بخونی ؟
دانلــــــود PDF
فهرست
C
تفاوت فرمت های فونت در طراحی سایت
C
انواع فرمت های فونت
C
از کدام یک فونت ها باید استفاده کنیم؟
C
چگونگی Embed فونت های وب
C
هاست کردن وب فونت ها
C
منابع دریافت وب فونت ها
تفاوت فرمت های فونت،
در طراحی سایت
یکی از مباحثی که در طراحی سایت خصوصا در بخش CSS مطرح می شود، تفاوت فرمت های فونت در طراحی سایت است. فرمت های فونت ها با یکدیگر متفاوت هستند و هرکدام از آن ها در یک بازه زمانی خاصی ساخته شده اند و در سایت های مختلف به کار می روند. بهینه بودن فونت های سایت شما هم یک طراحی سایت خوب و جذاب را برای شما به ارمغان می آورد و هم اینکه یکی از نکات سئو سایت محسوب می شود. همچنین شما باید در انتخاب فرمت فونت سایت خودتان دقت کنید به این دلیل که همه فونت ها در همه دستگاه ها به خوبی نمایش داده نمی شوند و ممکن است مثلا یکسری از فونت ها در نسخه موبایلی سایت شما به خوبی نمایش داده نشوند.
انواع فرمت های فونت
زمانی که شما یک Web font licensing دریافت می کنید، پکیجی از فونت ها به شما داده می شود که تفاوت فرمت های فونت در طراحی سایت را نشان می دهند. این فرمت ها شامل فرمت های زیر می باشد:
Embedded OpenType(EOT): EOT یک فرمت قدیمی است که توسط مایکروسافت توسعه داده شده است. اینترنت اکسپلورر های قدیمی از این فرمت برای رندر کردن وب فونت های شما استفاده می کردند. EOT معمولا فشرده سازی نشده است برای همین اگر به پشتیبانی مرورگر هایی مثل Internet Explorer 8 یا پایین تر از آن نیاز ندارید بهتر است اصلا از این فرمت از فونت استفاده نکنید. (فکر نمی کنیم دیگر کسی از آن مرورگر ها استفاده کند)
TrueType(TTF): TTF یک فرمت فونت توسعه داده شده توسط مایکروسافت و اپل در سال 1980 است. فایل های مدرن TTF را هم فونت های TrueType OpenType می نامند. TTF برای اینکه یکسری از مرورگر های قدیمی را هم سایت شما پشتیبانی کند، خصوصا بر روی موبایل، کارآمد است. هرچند که فرمت های بهتری هم وجود دارد.
Web Open Font Format(WOFF): WOFF در سال 2009 به عنوان نمونه توسعه یافته ای از فونت های TrueType و OpenType توسعه داده شد. این فرمت تمام فایل های فونت را فشرده سازی می کند و برای تمامی مرورگر های مدرن مناسب است.
Web Open Font Format 2(WOFF2): WOFF2 یک بروز رسانی از WOFF اصلی است. این نسخه توسط گوگل توسعه داده شده است و بهترین فرمت در بین فرمت های فونت به حساب می آید. این فونت ها سایز کمتری دارند و عملکرد خیلی بهتری هم در تمام مرورگر های جدید دارند.
از کدام یک فونت ها باید استفاده کنیم؟
حال که تفاوت فرمت های فونت در طراحی سایت را متوجه شدیم، بهتر است ببینیم که کدام را باید برای سایت خودمان انتخاب کنیم. در نظر داشته باشید که اگر بیشتر کاربران هدف شما از مرورگر های مدرن استفاده می کنند، مسلما باید از فرمت های WOFF و WOFF2 استفاده کنید. لازم است بگوییم که بهتر است کلا از همین دو فرمت استفاده کنید؟ به این خاطر که به نظر نمی رسد که هنوز کاربرانی وجود داشته باشند که از Internet Explorer 8 به قبل استفاده می کنند.(هستند اما مسلما شاید کمتر از 1 درصدشان مخاطب سایت شما باشند) پس به ریسک استفاده از دیگر فرمت ها نمی ارزد و بهتر است که برای فونت های سایت خود از همین دو فرمت جدید استفاده کنید. پیشنهاد ما هم همین WOFF2 است که گوگل هم آن را می پسنند و رتبه خوبی به سایت شما می دهد.
به هر حال اگر فکر می کنید که دستگاه های مخاطبان شما خیلی قدیمی هستند و این فونت ها را پشتیبانی نمی کنند همان بهتر است که از EOT و TTF استفاده کنید. می بینید که تفاوت فرمت های فونت در طراحی سایت چقدر مشهود است و چقدر فاصله زمانی بین توسعه این فونت ها وجود دارد. تصور کنید از زمانی که TTF عرضه شده است تا زمانی که WOFF پا به میدان بگذارد فقط 29 سال می گذرد. همچنین فرمت SVG هم برای فونت ها وجود دارد که خیلی از متخصصان طراحی سایت این نوع فونت ها را اصلا پیشنهاد نمی کنند به این دلیل که اصلا به طور کلی Google Chrome آن را پشتیبانی نمی کند. مرورگر محبوبی که ما و شما احتمالا از آن داریم استفاده می کنیم.
چگونگی Embed فونت های وب
حال که تفاوت فذمت های فونت در طراحی سایت را متوجه شدید می توانید دیگر به راحتی فرمت فونت هایتان را در سایت تغییر دهید. چرا می گوییم به راحتی؟ به این خاطر که کافیست کد زیر را به CSS سایت خود اضافه کنید: (کد ها در منبع هست)
@font-face {
font-family: FontName;
src: url(‘path/filename.eot’);
src: url(‘path/filename.eot?#iefix’) format(’embedded-opentype’),
url(‘path/filename.woff2’) format(‘woff2’),
url(‘path/filename.woff’) format(‘woff’),
url(‘path/filename.ttf’) format(‘truetype’);
}
اگر هم فقط قرار است که مرورگر های مدرن را پشتیبانی کنیم از این ها باید استفاده کنیم:
@font-face {
font-family: FontName;
src: url(‘path/filename.woff2’) format(‘woff2’),
url(‘path/filename.woff’) format(‘woff’);
}
برای اینکه در المان های سایتمان هم این فونت ها تعریف بشوند برای مثال می توانیم از این کد ها استفاده کنیم:
body {
font-family: ‘FontName’, Helvetica, Arial, sans-serif;
}
هاست کردن وب فونت ها
یکی از انعطاف پذیر ترین راه ها برای بارگذاری فرمت های فونت ها این است که خودمان آن ها را در هاست وارد کنیم. به این معنا که می توانیم فایل فونت ها را در سرور هاست کنیم که هر وقت بازدیدکنندگان وارد سایتمان شدند، فونت های سایتمان را به همان صورتی که ما می خواهیم ببینند. برای این کار هم نه نیاز به کد های ترکینگ است و نه نیاز است که برای بارگذاری آن ها از جاوا اسکریپت استفاده کنیم. پیشنهاد ما این است که از همین طریق برای بارگذاری وب فونت های سایتتان استفاده کنید تا نیازی نباشد برای تک تک صفحات سایتتان CSS وب فونت ها را تعریف کنید.
لازم است این موضوع را هم به شما بگوییم که اگر می خواهید این کار را انجام بدهید از درست بودن CSS فونت های خودتان با خبر شوید تا به درستی این فونت ها در سایت شما بارگذاری شوند. اگر این فونت ها درست بارگذاری نشوند ممکن است فونت شما خراب شود یا فونت پیشفرض سیستم روی سایت شما باشد که مسلما فونت پیشفرض سیستم حتما با قالب سایت شما همخوانی ندارد و ممکن است هم ظاهر نامطلوبی به سایت شما بدهد و هم اینکه اگر مخاطب با این ناهماهنگی مواجه شود دیگر هیچوقت به سایت شما برنمی گردد.
منابع دریافت وب فونت ها
حال دیگر تفاوت فرمت های فونت در طراحی سایت را می دانید و می دانید که چگونه هم باید فونتتان را در سایت بارگذاری کنید. بیایید کمی عمیق تر وارد وب فونت ها بشویم و ببینیم این فونت ها را از کجا می توانیم کد هایشان را دریافت کنیم:
-Clagnut’s OpenType CSS Sandbox توسط Richard Rutter: یک جای عالی برای تست کرد ویژگی های OpenType و جمع آوری کد های CSS
-Webfont Handbook توسط Bram Stein: یکی از بهترین به اصطلاح کتاب ها برای خواندن وب فونت ها، رندر کردن فونت ها و تست عملکرد فونت ها
Copy Paste Character: این یک وب سایت عالیست که به شما اجازه می دهد به کاراکتر های ویژه ای که در سایتتان می خواهید استفاده کنید دسترسی داشته باشید.
نتیجه گیری
تفاوت فرمت های فونت در طراحی سایت شاید از آن دسته موضوعاتی بود که فقط طراحان سایت و توسعه دهندگان به آن توجه می کردند. معمولا مخاطبان عادی سایت ها و حتی صاحبان کسب و کار از این موضوعات خبر ندارند. ما سعی کردیم که قضاوت را در انتخاب فرمت فونت ها به عهده شما بگذاریم اما بیایید رو راست باشیم، هیچکس از TFF و EOT استفاده نمی کند و نمی خواهد که این ریسک را قبول کند. دنیا دارد مدرن می شود و نسخه های همه چیز دارد تغییر پیدا می کند. فونت ها هم دیگر فرمت 20 سال پیش خود را ندارند و همه چیز تغییر کرده است. ما هم باید با پیشرفت تکنولوژی و مدرن شدن دنیا خودمان را وفق بدهیم. ممنون که در این مقاله همراه ما بودید و امیدواریم که حالا بدانید از چه فرمت فونتی باید استفاده کنید.
منبع:
Css-tricks