بلاگ

افزودن فونت دلخواه با روش FONT- FACE به صفحه وب

افزودن فونت دلخواه با روش FONT- FACE به صفحه وب

امتیاز کاربران

ستاره فعالستاره فعالستاره فعالستاره فعالستاره فعال
 

یکی از مشکلاتی که در وب فارسی با اون مواجه هستیم، محدودیت فونت هست. متاسفانه وب فارسی ما محدود به سه فونت هست که بر روی تمامی سیستم ها نصب شده هست. فونت های arial, Tahomaو mono-type تنها فونتهایی هستند که می‌توانیم از آنها استفاده کنیم در حالی که برای زبان انگلیسی حداقل نزدیک به 10 فونت در دسترس هست.

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

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

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

بعد از همه گیر شدن مرورگر فایرفاکس و پس از آن ارائه مرورگرهای اپرا، سافاری برای ویندوز و کروم، پشتیبانی از قابلیت های CSS3 گسترش پیدا کرد در نتیجه پشتیبانی از قابلیت @font-face افزایش یافت. با استفاده از این قابلیت می‌توان فونتی را به صفحه پیوست کرد و در صورتی که این فونت بر روی سیستم کاربر موجود نباشد، از روی server دریافت شده و برروی سیستم کاربر قرار می‌گیرد و شما می‌تواند از هر فونتی که دوست دارید بر روی وب استفاده کنید.

تنها مشکلی که وجود داشت، مرورگر اینترنت اکسپلورر بود که تا قبل از نسخه 9 از این قابلیت پشتیبانی نمی‌کرد. البته مایکروسافت، سالها قبل فرمت EOT را برای پیوست فونت به صفحه ایجاد کرده بود. مایکروسافت امیدوار بود که این استاندارد را ترویج دهد ولی هیچ مرورگری از این فرمت پشتیبانی نکرد.

در حال حاضر می‌توان فونت ها را با فرمت TTF به صفحه پیوست کرد که این فرمت توسط تمامی مرورگرهای جدید، قابل نمایش است. با استفاده از سرویس ‌های آنلاین نیز می‌توان همین فرمت TTF را به فرمت EOT تبدیل کرد تا مرورگرهای اینترنت اکسپلورر نیز بتوانند فونت های شما را به شکل درستی به نمایش بگذارند. علاوه بر این فرمت، کنسرسیوم جهان وب، فرمت WOFF را هم پیشنهاد کرد که حجم کمتری را ارائه می‌دهد و هم می‌توان حق نشر فونت را هم در آن حفظ کرد.

خوشبختانه مرورگرهای فایرفاکس و اپرا و آی ای 9 از این فرمت پشتیبانی کره اند و به نظر می‌رسد که در آینده نزدیک این فرمت در تمامی مرورگرها پشتیبانی شود. با استفاده از این سه فرمت می‌توانید هر فونتی را بر روی وب استفاده کنید و مطمئن خواهید بود که فونتتان در مرورگرهای مختلف جدید و قدیمی به درستی نمایش داده می‌شود.

تنها سیستم عامل iOS نسخه قدیمی است که تنها از فرمت فونت SVG پشتیبانی می‌کند ولی این مشکل iOS نیز در نسخه 4.2 حل شده است. اکنون مرورگر این سیستم عامل می‌تواند فونت‌های TTF را نیز بخواند.

خب حال باید بریم سر آموزش استفاده از فونت ها و ببینیم که دستور @font-face را به چه شکل باید استفاده کنیم. برای استفاده از این دستور تنها کافیست این عبارت را در بالای فایل CSSخود قرار دهید:

@font-face {
  font-family: 'Yekan';
  src: url('fonts/Yekan.eot?#') format('eot'),  /* IE6–8 */
       url('fonts/Yekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('fonts/Yekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
  font-weight: normal;
  font-style: normal;
}

در اینجا در خط اول، font-family را تعیین کرده ایم، هر نامی را که دوست داشته باشید، می‌توانید برای فونت انتخاب کنید. در خط دوم در دستور src باید مسیر فونت بر روی serverرا مشخص کنید که من در اینجا یه پوشه به نام fonts ساختم و فونت های مورد نظر رو توش ریختم و مسیرش شده همون کد بالا و شما میتونین بسته به سلیقتون تغییرش بدید و در آخر در دستور format، نوع فونت را مشخص می‌کنید. این دستور را در اول فایل CSSقرار می‌دهید و در ادامه در هر جایی که از فونتی با اسم yekan استفاده کنید، فونت مورد نظر شما از سرور دریافت شده و بر روی سیستم کاربر نمایش می‌یاید.

 font-family: 'yekan’;

اگر این بخش را در اول فایل CSS قرار ندهید و از فونت yekan در دستوری قبل از دستور font-face استفاده کنید، از آنجائیکه هنوز دستور font-face در دسترس مرورگر نبوده است، فونت مورد نظر شما نمایش داده نمی‌شود پس سعی کنید همیشه این بخش را در اول فایل CSS خود قرار دهید.

حال باید اینترنت اکسپلورر نیز بتواند فایل فونت مربوط به خود را دریافت کند. فرمت EOT را در خط اول قرار می‌دهیم و فرمت TTF را در خط بعدی. مرورگرهای جدید خط اول را نادیده می‌گیرند و به سراغ خط دوم می‌روند. البته اینترنت اکسپلورر باز هم رفتاری عجیب نشان می‌دهد. اگر دستورات خود را به این شکل بنویسید، اینترنت اکسپلورر نخست فایل EOTرا دریافت می‌کند و به سراغ خط بعدی می‌رود و فایل TTF را هم دریافت می‌کند ولی ملاک را فایل دوم قرار می‌دهد و از آنجائیکه نمی‌تواند این فرمت را نمایش دهد، متن شما را با فونت پیش‌فرض نمایش می‌دهد و حتی از فرمت EOT که دریافت کرده بود نیز استفاده نمی‌کند.

  src: url('fonts/Yekan.eot?#') format('eot'),  /* IE6–8 */

حال ما در کد بالا از  یک هک استفاده کرده ایم تا IE را به اشتباه بیاندازیم تا تنها خط اول را ببیند. که برای اینکار  دو علامت ?# را بعد از آدرس فرمت EOTاضافه کرده ایم.

با این ترفند، مرورگر اینترنت اکسپلورر تنها خط اول را می بیند و تنها فایل EOT را دریافت می ‌کند در حالی که مرورگرهای دیگر خط اول را نادیده گرفته و خط دوم رو می‌خوانند و فونت TTF را دریافت می‌کنند. حال برای مرورگرهای جدیدتر از فرمت WOFF هم استفاده می‌کنیم تا کاربرانی که از این مرورگرها استفاده می‌کنند، فایل کم حجم تری را دریافت کنند. در این حالت، صفحه با سرعت بیشتری برای این کاربران باز می‌شود. البته هک‌های دیگری همچون هک smiley که توسط پاول آیریش ایجاد شده. البته همه جا پیشنهاد شده است که از هک اول که ما توضیحش دادیم، استفاده شود.

خب این آموزش هم به پایان رسید. و حالا تمامی مرورگرهای قدیمی و جدید می‌تونند فونت هانون رو دریافت کنند و سایت شما را با فونت مورد نظرتون نمایش بدن.

طراحی و برنامه نویسی قالب و افزونه های اختصاصی

سفارش پروژه
888-3035 0933
راه آسان تری برای ارتباط با کاربران مان پیدا کرده ایم ツ کانال تلگرام آی سی ام اس

برخی محصولات مارکت

210,000تومان
95,000تومان
پیش نمایش: http://bit.ly/2vLhYfN
مـــستنـــدات: http://bit.ly/2ne57id
با دریافت این محصول 95 آی بُن هدیه بگیرید
55 % تخفیف با

199,000تومان
49,000تومان
پیش نمایش: http://bit.ly/2srnaDw
مـــستنـــدات: http://bit.ly/2IXsp54
با دریافت این محصول 49 آی بُن هدیه بگیرید
75 % تخفیف با

325,000تومان
49,000تومان
پیش نمایش: http://bit.ly/2ITv7c0
مـــستنـــدات: http://bit.ly/2GQBH0Y
با دریافت این محصول 49 آی بُن هدیه بگیرید
85 % تخفیف با

دیدگاه (14)

  1. سارا محمدی

البته یه فرمت جدید تری هم اومده که نسخه دوم woff هست و بنظرم هر روز داره این فرمت فونت ها بهتر و بهتر تر و ایراد هاشون کمتر میشه
به امید روزی هیچ محدودیتی نداشته باشیم

  1. رضا خیرابی

اقا دمت گرم

  1. M.HG

میخواستم بگم که دستون درد نکنه اما من مشکلی که دارم اینه که من وقتی بعضی سایت ها رو میبینم می خوام فونت اون ها رو تغییر بدم به دلخواهم و هر موقع که وارد اون سایت بشم با همون فونت نمایش داده بشه... چی کار کنم؟ لطفاٌ بفرمایید و هم چنین راهی به غیر از افزونه نشان دهید که بشه انجامش داد حتی یک فرد مبتدی ...
باتشکر

  1. محمدحسین نیازی    M.HG

خواهش میکنم
من درست متوجه نشدم ولی فکر کنم منظورتون اینه میخواین سایت ها با فونت شما نمایش داده بشند
خوب اگر کروم استفاده میکنید به قسمت setting بعد گزینه show advanced setting و بعد عنوان web content رو پیدا کنید
بعد هم گزینه customize font میزنید و بعد هم فونت دلخواهتون رو تنظیم میکنید که پیشرفته ترش میشه افزونه ای داره
توی فایر فاکس هم همینطوریه منتها باید از قسمت setting به تب content برید و فونت انتخاب کنید
اما غیر این میشه سایت هایی که خودتون دارید و مدیرش هستید که با این روش فونت فیس میتونید هر کجای سایت رو که خواستید با فونت دلخواهتون نشون میدید مثلا عناوین یک فونت ، توضیحات فونت دیگه و....
امیدوارم کمکی کرده باشم اگر بازم در توضیحاتم جای مبهمی بود حتما بگید بیشتر توضیح بدم
موفق باشید

  1. شیوا نگهبان

توضیحاتتون عالی بود
فک میکنم بهترین روش فونت همین فونت فیس باشه البته نظر من اینه

  1. مینا افرایی

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

  1. رضا بیگی

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

  1. محمدحسین نیازی    رضا بیگی

رضا جان چشم
ولی باید صبر کنیا

  1. سپیده نجفی

ممنمون از توضیحات خوبتون
فقط یه سوالی دارم آیا میشه از چندتا فونت مختلف توی یه سایت استفاده کرد؟
مثلا تیتر مطالبم یه فونتی باشه محتوای مطالبم یه فونت دیگع
ممنون میشم جواب بدید

بله میشه ولی باید کد های هر کدوم رو جدا بزنید
مثلا شما میخواهید از فونت های yekan و nasim استفاده کنید
باید به این شکلی که میگم عمل کنید
اول فونت فیس هاشون رو تعریف میکنید
فونت فیس yekan

@font-face {
  font-family: 'Yekan';
  src: url('fonts/Yekan.eot?#') format('eot'),  /* IE6–8 */
       url('fonts/Yekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('fonts/Yekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
  font-weight: normal;
  font-style: normal;
}

و بعدی فونت فیس nasim
@font-face {
  font-family: 'Nasim';
  src: url('fonts/Nasim.eot?#') format('eot'),  /* IE6–8 */
       url('fonts/Nasim.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('fonts/Nasim.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
  font-weight: normal;
  font-style: normal;
}

کار خیلی ساده ای هست ولی فقط یادتون نره اول فایل css تعریفش کنید
حالا مثلا میخواهید فونت yekan رو برای تیتر و فونت nasim رو برای محتوا انتخاب کنید
فقط کافیه برای اینکار به اون کلاس css مورد نظرشون این نوع فونت فمیلی ها رو بدید
برای فونت yekan
font-family: Yekan, Tahoma, Helvetica, sans-serif;

برای nasim
font-family: Nasim, Tahoma, Helvetica, sans-serif;

گاهی موارد هم یادتون باشه اگر از فونت عالی یا Font Awesome یا هر نوع فونت آیکونی استفاده میکنید اول فونت آیکون رو بزارید و بعد اسم های فونتتون رو ، مثل مثال زیر
font-family: FontAwesome, Nasim, Tahoma, Helvetica, sans-serif;

دیگه فکر کنم همه چیزا رو گفتم
موفق باشین

  1. پوریا - دیزاین

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

خوشحالم مطلب مفیدی بوده

  1. یوسف زمانی

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

امیدوارم همینطور چیز های جدیدتر که تجربیاتم هست ببیشتر منتقل کنم

هنوز دیدگاهی بیان نشده است

ارسال دیدگاه

پیوست ها (0 / 3)
Share Your Location

با آی بن ارزان تر خرید کنید

آی بن، همان‌طور که از نامش بر‏می‌‏آید، یک بن خرید الکترونیکی است که پس از خرید هر محصول، در حساب شما منظور می‏‌شود.
در حقیقت شما پس از نخستین خرید از آی سی ام اس، بسته به ارزش کالای خریداری شده و چند فاکتور دیگر، به میزانی امتیاز "آی بن" که در واقع تخفیفی برای شما در خریدهای بعدی است، دریافت می‏‌کنید.

از آی بن بیشتر بدانید

نظرات کاربران

محمدحسین نیازی نظری را ارسال کرده است در :از سیر تا پیاز پشتیبانی آنلاین در وردپرس و جوملا با Crisp
سلام اگر آیکونی از اسکریپت نمایش نمیده یعنی ممکنه شما ق...
ارسال شده در Joomla Article پنج شنبه, 15 نوامبر 2018 09:48
فاطمه معصومی نظری را ارسال کرده است در :از سیر تا پیاز پشتیبانی آنلاین در وردپرس و جوملا با Crisp
سلام خسته نباشید من این افزونه را در سایتم نصب کردم اما
ارسال شده در Joomla Article پنج شنبه, 15 نوامبر 2018 09:08
مهرسا نظری را ارسال کرده است در :حل مشکل بهم ریختگی تاریخ شمسی در مدیریت مطالب k2
خیلی بدردم خورد تنکس
ارسال شده در Joomla Article سه شنبه, 13 نوامبر 2018 13:44
محمدحسین نیازی نظری را ارسال کرده است در :از سیر تا پیاز پشتیبانی آنلاین در وردپرس و جوملا با Crisp
سلام متاسفانه این فرم ها با php ساخته شده و شخصی سازی اخت...
ارسال شده در Joomla Article جمعه, 02 نوامبر 2018 13:15

سوالات و اشکالات فنی در رابطه با محصول تهیه شده را میتوانید از پشتیبانی آی سی ام اس بپرسید

ثبت نام

 
محمدحسین نیازی پاسخ گوی شماست

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

مدیر و موسس آی سی ام اس