نحوه تغییر فونت سایت

[shinjuku]

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

[New_Sra]

شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه 40 فونت فارسی اصلاح شده

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

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

پس از این برخی از توسعه دهندگان بر روی تکنیکی دیگر کار کردند که فونت ها را با استفاده از جاوااسکریپت و قابلیتهای مانند 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.ttf') format('truetype'); 
} 
  

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

حال با استفاده از سرویس های آنلاینی چون Kirsle (تنها این سایت توانست فونت های فارسی را به درستی تبدیل کند) فونت را به فرمت EOT تبدیل می کنیم و دستورمان را نیز ویرایش می کنیم:

 @font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot') format('eot'),    
          url('fonts/yekan.ttf') format('truetype'); 
} 
  

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

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

 @font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),    
          url(‘fonts/yekan.ttf’) format(‘truetype’); 
} 
  

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

 @font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),    
          url('fonts/yekan.woff') format('woff'),
          url(‘fonts/yekan.ttf’) format(‘truetype’); 
} 
  

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

با دریافت این فایل به 40 فونت فارسی اصلاح شده با سه فرمت TTF, WOFFو EOT دسترسی خواهید داشت که می*توانید آنها را در هر صفحه ای که دوست دارید، به کار ببرید. برای سهولت کار یک فایل به نام fonts-demo.html داخل فایل زیپ است. با باز کردن این فایل می*توانید نمایی از تمامی فونت ها ببینید و نام هر فونت را نیز در کنارش مشاهده کنید. با دیدن source صفحه نیز می توانید دستور @font-face را هم مشاهده کنید و در صورت نیاز آن را کپی کرده و در فایل CSS خود قرار دهید. همچنین یک پوشه به نام fonts نیز وجود دارد که هر 40 فونت با سه فرمت مختلف درون آن جای گرفته. فونتهایی را که می خواهید به صفحه پیوست کنید را از داخل آن انتخاب کرده (هر سه فرمت را انتخاب کنید) و بر روی سرور خود قرار دهید.

توجه داشته باشید که نمی توانید چند فونت را به طور همزمان با یک دستور @font-face به صفحه پیوست کنید و برای پیوست چند فونت مختلف باید برای هر فونت از یک دستور @font-face استفاده کنید.

البته توصیه شده بود که برای استفاده از فونت ها در وب باید حتما MIME Type فونت را هم مشخص کنید و به server بگوئیم که فرمت فایل فونت چیست. منتها به خاطر عدم تعیین یک استاندارد جامع، به نظر می رسد که تعیین نکردن MIME Type مشکلی ایجاد نکند. به عنوان مثال در مستندات سایت موزیلا آمده است که به خاطر عدم تعیین MIME Type برای فرمت*های مختلف فونت، این مرورگر دیگر به فرمت هایی که بر روی سرور تعیین شده توجهی نمی کند.

البته بعد از ارائه فایرفاکس 6 به خاطر مشکل فونت های غیر استاندارد فارسی، حروف جدا از هم نمایش داده میشد که با اصلاح فونت ها از طریق سایت Online Font Convertor این مشکل هم برطرف شده است. دقت داشته باشید که فونت های فارسی همچنان غیراستاندارداند و احتیاج به ویرایش شدن توسط متخصصین طراحی فونت دارند منتها با همین تغییری که اکنون ایجاد شده است می*توان این فونت را به کاربرد و در مرورگرهای مختلف نیز فونتها را به شکل درستی به نمایش می گذارند.

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

در حال حاضر در تست ما این شیوه بر روی مرورگرهای فایرفاکس 3.6 به بعد، کروم 13 به بعد، اپرا 11 به بعد و اینرنت اکسپلورر 7 و نسخه های بعد از آن به درستی کار کرد. امیدواریم با ارائه این فونت*ها بتوانیم اندکی به دوستان همکار و طراحان وب، کمک کرده باشیم.

دانلود رایگان فونت های اصلاح شده:
[تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ]

[yasinshop]

سلام . اول از همه بابت این مطلب ازتون تشکر می کنم . مشکلم اینجاست که شما فرمودید کد رو بالای فایل css قرار بدیم . ببینید داخل پوشه css قالب تعداد زیادی فایل با فرمت css وجود داره ... توی کدوم فایل این کد رو باید قرار بدم ؟
addresses.css
authentication.css
category.css
cms.css
یا فایل ها دیگه ؟
سوال بعدی هم اینکه شما چهار تا کد گذاشتید که قاعدتا کامل ترین اونها کد آخریه با توجه به توضحاتی که دادید . همون کد آخر رو باید بزارم دیگه درسته ؟

[New_Sra]

Global.css

موجود در پوشه rtl قالبتون
بسته به کاربریتون داره ولی اخری طبیعتا کامل تره

[irmacfa]

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

[Ashkan]

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

احتمالا ظرف یک الی دو هفته اینده آموزش تصویری این موضوع را منتشر خواهیم کرد

[New_Sra]

توضیحات پایه ای درج شده و بخش انتهای مقاله کاملترینش درج شده و از ان استفاده نمائید و تمام

[irmacfa]

باز سخت هستش :d

[alipour]

من کد های قسمت 4 رو در فایل global.css کپی کردم و فون یکان رو تو پوشه فونت ریختم ولی بخش آخر رو درست متوجه نشدم که نو کدوم مسیر و کجا باید فونتی که قیمت ها رو به انگلیسی نشون میده باید تغییر بدم به فونت یکان . لطفاً این فسمت رو توضیح بدین . ممنونم از راهنمایی تون

[New_Sra]

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