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

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

امتیاز شما به این پست
(12)
چاپ  

یکی از مشکلاتی که در وب فارسی با اون مواجه هستیم، محدودیت فونت هست. متاسفانه وب فارسی ما محدود به سه فونت هست که بر روی تمامی سیستم ها نصب شده هست. فونت های 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 که توسط پاول آیریش ایجاد شده. البته همه جا پیشنهاد شده است که از هک اول که ما توضیحش دادیم، استفاده شود.

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

پیشنهاد میکنیم این پست ها را هم بخوانید

نیاز به مشاوره بیشتر دارید؟ برای صحبت با متخصصان ما تماس بگیرید.
0933-8883035 5 دقیقه رایگان

مطالعه در 7 دقیقه

به همراه یک فنجان قهوه

دیدگاه کاربران

مکانی برای پرسش و پاسخ شما

دیدگاه های اخیر

دیدگاه (18)

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

سلام
کافیه کد سی اس اسی که در بالا ذکر شده رو درون فایل css قالبتون قرار بدید
مثلا در کد بالا شما میبایست ابتدا یک فولدر به نام fonts درون پوشه سی اس اس خودتون درست کنید و فایل های تحت وب فونت رو درونش قرار بدید و سپس اگر همه مراحل صحیح باشه فونت روی سایتتون فراخوانی میشه
حالا میمونه فونت رو چطور در قسمت های مختلف سایت اعمال کنید
برای مثال من میخوام به کل محتوای کلاس body سایت فونت ایران سنس بدم ، برای این کار از کد زیر استفاده میکنم
body {
font-family: IRANSans;
}
ولی مثلا میخوام تگ های h سایت فونت یکان باشه ، در نتیجه از کلاس زیر استفاده میکنم
h1, h2, h3, h4, h5, h6 {
font-family: yekan;
}
امیدوارم جوابم کمکتون کنه

This comment was minimized by the moderator on the site

سلام آقای نیازی
این سایت از چه فونتی استفاده میکنه؟
و از کجا مییشه برای جوملا تهیه کرد؟
https://www.parsine.com/fa/news/456204/%D9%BE%DB%8C%D8%A7%D9%85%D8%AF%D9%87%D8%A7%DB%8C-%D9%85%D9%86%D9%81%DB%8C-%D9%85%D8%B5%D8%B1%D9%81-%D9%82%D8%B1%D8%B5-%D8%A8%DB%8C%D9%88%D8%AA%DB%8C%D9%86
تشکر

This comment was minimized by the moderator on the site

سلام خدمتون
این فونت ، فونت ایران شارپ IRAN SHARP هست ، محصول فونت ایران که میتونید از سایتش http://bit.ly/2DD4nf0 تهیه کنیدش
هر فونت تحت وبی رو میتونید بروی هر نوع مدیریت محتوایی چه جوملا چه وردپرس پیاده کنید ، فرقی نمیکنه از چی استفاده میکنید
دیدن فونت های فارسی اپن سورس که رایگان هم هستند خالی از لطف نیست که در این صفحه http://bit.ly/2XW5cYc قرار دارند.که از بین فونت های موجود ، فونت گندم تقریبا شبیه ایران شارپ هست

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

اقا دمت گرم

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

بله میشه ولی باید کد های هر کدوم رو جدا بزنید
مثلا شما میخواهید از فونت های 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;

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

This comment was minimized by the moderator on the site

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

This comment was minimized by the moderator on the site

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

هنوز هیچ دیدگاهی ارسال نشده است.
بارگذاری بیشتر ...

ارسال دیدگاه

  1. ارسال دیدگاه به عنوان مهمان ثبت نام یا ورورد به ناحیه کاربری.
پیوست ها (0 / 3)
اشتراک موقعیت شما