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

Fri, 09/09/2011 - 21:19 — amirabbas

یکی از مشکلاتی که در وب فارسی با آن مواجه هستیم، محدودیت فونت است. متاسفانه در وب فارسی ما محدود به سه فونت هستیم که بر روی تمامی سیستم ها نصب شده است. فونت 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 این مشکل هم برطرف شده است. دقت داشته باشید که فونت‌های فارسی همچنان غیراستاندارداند و احتیاج به ویرایش شدن توسط متخصصین طراحی فونت دارند منتها با همین تغییری که اکنون ایجاد شده است می‌توان این فونت را به کاربرد و در مرورگرهای مختلف نیز فونتها را به شکل درستی به نمایش می‌گذارند.

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

دانلود فونت های اصلاح شده

دانلود پیکیج فونت اصلاح شده

پی نوشت:

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

Fri, 09/09/2011 - 23:08 — فرهاد (not verified)

عالی بود . تو جی پلاس

عالی بود .
تو جی پلاس امیرعباس دیدم, با اوپرا 9 سازگاری نداشت فکر کنم ... فونت رو اریال نشون میداد .

Fri, 09/09/2011 - 23:48 — amirabbas

فرهاد جان اپرا از نسخه 10.6

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

Fri, 09/09/2011 - 23:10 — مبين زاده كوچك (not verified)

سلام واقعا راهنماي كامل و

سلام
واقعا راهنماي كامل و جامعي بود و هيچي كم نداشت..

Sat, 09/10/2011 - 00:10 — Kamiar (not verified)

IE ۷ و ۸ جواب نمیده.

Sat, 09/10/2011 - 00:20 — amirabbas

کامیار برای تست از چه برنامه

کامیار برای تست از چه برنامه ای استفاده کردی شما ؟ من الان توی آی ای تستر از نسخه 6 تا 8 رو تست کردم و مشکلی نداره. شاید برنامه ای که استفاده میکنید نمیتونه فونت ها رو نشون بده. فرمت EOT خیلی وقته توی IE ساپورت داره و الان یک سالی هست به همین شکل از فونت با فرمت EOT استفاده کردیم و مشکلی نبوده.

Sat, 09/10/2011 - 01:35 — مرتضی (not verified)

فلسفه اینکه yekan و koodak در

فلسفه اینکه yekan و koodak در مثال ها با هم قاطی شدن چیه؟!!

Sat, 09/10/2011 - 04:36 — amirabbas

ممنون مرتضی. درستش کردم :)

ممنون مرتضی. درستش کردم :) برای تست یه تکه کد نوشته بودم و داشتم روی فونت کودک تست میکردم بعد برای مثال گفتم دیگه کودک رو ننویسم و یکان رو نوشتم ولی بین کدها یه جاهایی همون کودک باقی موند. اشتباه شده بود. البته شما میتونی اسم فونت رو هر چی دوست داری بذاری. مثلا اسم فونت رو بذاری مرتضی بعد تو بخش آدرس، فونت تیتر رو آدرس بدی. هر جا تو سی اس اس بنویسی مرتضی، فونت تیتر لود میشه. در هر صورت ممنون ;)

Sat, 09/10/2011 - 02:44 — Kamiar (not verified)

من از دولوپر تولز آی‌ای ۹

من از دولوپر تولز آی‌ای ۹ استفاده میکنم. فکر میکردم این مشکل محدود به فونتی هستش که من دارم استفاده میکنم، پکیج شما رو هم که دیدم باز هم همینطور بود.

Sat, 09/10/2011 - 03:02 — Kamiar (not verified)

البته با آی‌ای ۶،۷،۸ جداگانه

البته با آی‌ای ۶،۷،۸ جداگانه نصب روی ماشین مجازی هم تست شده

Sat, 09/10/2011 - 04:40 — amirabbas

کامیار جان یه مشکلی باید تو

کامیار جان یه مشکلی باید تو سیستم شما باشه. من بعد از دیدن این کامنت این پکیچ رو ریختم روی فلش و توی سیستم دسکتاپم که روش XP نصب هست تست کردم. این اسکرین شات رو ببینید http://p30upload.com/download.php?imgf=1315669101_untitled.PNG توی اینترنت اکسپلورر 8 فاینال بدون هیچ مشکلی فونتها همشون لود شدن. شما یه تست دیگه هم بزن و از هک smiley استفاده کن. شاید اون برای شما جواب بده ولی در کل من این مطلب رو چند جا دیگه شر کردم ولی بچه ها که توی آی ای چک کردن همگی گفتن سالمه !!

Sat, 09/10/2011 - 03:07 — مسعود (not verified)

سلام چه عجب دیدم اینجا هم

سلام
چه عجب دیدم اینجا هم آپدیت شد !!! ولی بازم درستت درد نکنه هم بابت فونت‌ها و هم بابت آموزش
راستی فک کنم شعار سایتت این بود : هر هفته یک مقاله :دی درسته امیرعباس ؟‌(اسمایلی مجبور کردن نویسنده به نوشتن :دی)

Sat, 09/10/2011 - 04:42 — amirabbas

مسعود دلیل ننوشتن من به

مسعود دلیل ننوشتن من به گرفتاری و مهم تر از اون به خاطر سرعت خیلی پایین اینترنته. من برای نوشتن باید 10 تا مطلب رو بخونم و یه چکیده ازشون بنویسم. دوست ندارم فقط یه مقاله رو ملاک قرار بدم و ترجمش کنم چون اونطوری مطلب زیاد به دل نمیشینه و جامع نیست. الان سرعت اینترنتم اینقدر پایینه که حتی همین کامنتها رو هم با زحمت می فرستم چه برسه به اینکه بخوام هر هفته مطلب داشته باشم :) ولی در کل شاید بعدا بهتر بشه. سایت رو هم خیلی وقته قراره دیزاین مجدد کنیم ولی هنوز فرصت نشده. فعلا بخش آموزشگاه میاد بالا تا آخر این ماه به احتمال خیلی زیاد و بعد از اون شاید فرصتی بشه که کل سایت رو هم یه دستی به سر و روش بکشیم

Sat, 09/10/2011 - 04:40 — ali aghdam (not verified)

عالی بود

Sat, 09/10/2011 - 07:03 — ابراهيم (not verified)

با سلام ضمن عرض خسته

با سلام

ضمن عرض خسته نباشيد
ممنون از راهنمايي شما
خيلي عالي کار کرد

Sat, 09/10/2011 - 07:12 — علی (not verified)

مرسی زیاد امیرعباس جان نقل

مرسی زیاد امیرعباس جان

نقل قول از متن: "دقت داشته باشید که فونت‌های فارسی همچنان غیراستاندارداند و احتیاج به ویرایش شدن توسط متخصصین طراحی فونت دارند"

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

خیلی ممنون

Sat, 09/10/2011 - 07:21 — amirabbas

علی جان من تخصصی تو طراحی

علی جان من تخصصی تو طراحی فونت و مسائل مربوط به اون ندارم. طراحی فونت یه پروسه پیچیده ای داره و کار سختیه. الان تو ایران کسانی که کار طراحی فونت انجام میدن برای طراحی یک فونت مبالغ چند میلیونی دریافت می کنند. الان مایکروسافت یه ابزاری داره با اسم Microsoft Font Validator که میتونید از اینجا دانلودش کنید http://www.microsoft.com/typography/FontValidator.mspx فونت رو به این ابزار معرفی کنید بعد این نرم افزار تمامی قابلیت های فونت رو تست میکنه و خطاهای اون رو برای شما لیست میکنه. یه help ای هم توی برنامه هست که در مورد هر ایرادی، توضیح داده. همین الان این فونتها، ایرادات خیلی زیادی داره (حتی فونتهایی که اصلاح شدن) کلا کسانی که طراحی فونت بلد هستند باید این فونت ها رو بر طبق استانداردهای جدید بهینه کنند که متاسفانه این اتفاق نیافتاده. فونت های انگلیسی وضعیت خیلی بهتری دارند. فونت هایی که شرکت های معروف عرضه می کنند همگی استاندارد هستند.

Sat, 09/10/2011 - 08:57 — علی (not verified)

مرسی خیلی. مرجع استاندارد

مرسی خیلی. مرجع استاندارد فونت ها را اطلاع داری کجا هست؟ مثل w3 که برای استانداردهای وب هست مثلا.
اون نرم افزار مایکروسافت نرم افزار مرجع هست در این زمینه؟

خیلی ممنون بازم

Sat, 09/10/2011 - 22:01 — amirabbas

علی جان ظاهرا معتبرترین

علی جان ظاهرا معتبرترین اطلاعات و مستندات برای فرمت های TTF و OTF همین مطالب منتشر شده تو سایت مایکروسافته http://www.microsoft.com/typography/otspec/default.htm تو همین صفحه میتونید فایل کامل مستندات رو هم دانلود کنید. این فرمت ها برای سیستم عامل و خصوصاً صنعت چاپ هستند منتها از دو سه سال پیش که پای فونت ها به وب باز شده، از همین مستندات استفاده میشه. فقط استاندارد WOFF هست که بنیاد موزیلا توسعش داد و به کنسرسیوم جهانی وب پیشنهادش کرد. الان این فرمت هم به طور رسمی از طرف کنسرسیوم جهانی وب پشتیبانی شده و مستنداتش اینجا هست http://www.w3.org/TR/2010/WD-WOFF-20100727/

Sun, 09/11/2011 - 01:48 — علی (not verified)

خیلی لطف کردی امیرعباس

خیلی لطف کردی امیرعباس جان
تشکر

Sat, 09/10/2011 - 08:12 — payam (not verified)

ممنون عالی بود

ممنون
عالی بود

Sat, 09/10/2011 - 08:17 — mohsen sanei (not verified)

مرسي عالي بود منتظرم واسه

مرسي عالي بود منتظرم واسه بعدي

Sat, 09/10/2011 - 18:02 — meysam (not verified)

واقعان ممنون - خیلی کاره خوبی

واقعان ممنون - خیلی کاره خوبی کردین

Sat, 09/10/2011 - 20:03 — سپیده (not verified)

خیلی خوب بود. دست شما درد

خیلی خوب بود. دست شما درد نکنه :)

Sat, 09/10/2011 - 21:27 — foad (not verified)

دمتون گرم... کم پیش میاد که

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

Sun, 09/11/2011 - 00:00 — مشاور (not verified)

به نظر من هک IE از همه جالبتر

به نظر من هک IE از همه جالبتر بود
بقیه کارها را قبلا انجام داده بودم
با تشکر

Sun, 09/11/2011 - 07:27 — مهدی (not verified)

آقا عالی بود دستت درد نکنه من

آقا عالی بود دستت درد نکنه من توی فایر فاکس 6 فونت هام جدا از هم بود که با این پکیج شما مشکلش حل شد ممنون

Sun, 09/11/2011 - 21:28 — مجید عابد seoforum.ir (not verified)

سلام آقا عالی بود. من یه

سلام
آقا عالی بود.
من یه انجمن کوچولو در مورد بهینه سازی سایت و وبلاگ راه انداختم، مطلبت رو قرار دادم.
فقط یه خواهشی از تمام بچه ها، هر کسی که وبلاگ یا وب سایت داره از کاربرای فارسی زبان التماس کنه یه سری فونت استاندارد تو سیستمشون داشته باشن که طراحای وب راحت کارای سبک و شکیل دربیارن
من خودم هم حتماً به همه بازدیدکننده های سایت هام به زودی میگم اینا رو نصب کنن.
باتشکر از همه
راستی به انجمن سئوی من هم یه سر بزنید
www.seoforum.ir
موفق و پیروز باشید.

Sun, 09/11/2011 - 23:16 — amirabbas

مجید جان اصلا هدف از پیوست

مجید جان اصلا هدف از پیوست کردن فونت به صفحه اینه که کاربر رو مجبور نکنیم که فونت خاصی رو نصب کنه. الان شما وقتی از این فونت ها با تکنیکی که توضیح داده شده تو سایت خودتون استفاده کنید، اصلا لازم نیست که کاربر این فونت ها رو روی سیستم خودش داشته باشه. اگر فونت روی سیستم کاربر باشه که از همون استفاده میشه ولی اگر نباشه، فونت شما از server دریافت میشه و میره روی سیستم کاربر. به همین خاطر احتیاجی نیست که از کاربران بخوایم که یه فونتی رو حتما نصب کنن ;)

Sun, 09/11/2011 - 23:24 — امین مقدس (not verified)

ممنون جالب بود

Sun, 09/11/2011 - 23:59 — سه میم (not verified)

درود خسته نباشید. src:

درود خسته نباشید.
src: local('☺'), url(‘fonts/yekan.ttf’) format(‘truetype’);

Mon, 09/12/2011 - 01:38 — میلاد (not verified)

سلام...واقعا عالی بود....یک

سلام...واقعا عالی بود....یک سوال:

من از font-face و فونت های bbc persian تو چند سایت استفاده کرده ام...
تو این سایت: http://cinetek.ir/social-cinema/

صفحات داخلی، فونت بی بی سی در مرورگر فایرفاکس نشون داده نمیشه اما با کروم و اینترنت اکسپلورر درست نشون داده میشه...کجاشو باید درست کنم؟

@font-face { font-family: "BBCNassim"; src: url("http://www.cinetek.ir/fonts/bbc-nassim-bold.eot"); src: local("☺"), url("http://www.cinetek.ir/fonts/bbc-nassim-bold.woff") format("woff"), url("http://www.cinetek.ir/fonts/bbc-nassim-bold.ttf") format("truetype"); font-weight: bold; font-style: normal; }

Mon, 09/12/2011 - 02:12 — amirabbas

میلاد من سی اس اس طرحت رو چک

میلاد من سی اس اس طرحت رو چک کردم. سی اس اس ها خیلی نا منظم هستند. اول اینکه دستور فونت فیست رو ببر زیر فایل reset.css قرار بده که تو لود بالا قراره بگیره چون اگر دستور font-face رو وسط های کد استفاده کنی و قبلش تو یه دستور دیگه از همون فونت استفاده کرده باشی، فونتت نمایش داده نمیشه چون فونت رو هنوز تعریف نکردی ولی ازش استفاده کردی. در ضمن تو صفحه اولت اصلا فونتی لود نمیشه. من با net فایرباگ چک کردم ولی فونتی تو لیست برای لود ظاهر نشد.
این کارها رو حتما انجام بده

1- مطمئن شو که دستورات font-face جزو اولین دستورات سی اس اسی هست که لود میشه ( به reset.css اضافشون کن)
2- مطمئن باشه که مسیر فونت ها درسته ( با تب net تو فایرباگ چک کن)

Mon, 09/12/2011 - 03:07 — میلاد (not verified)

خیلی ممنون...کاربرد reset.css

خیلی ممنون...کاربرد reset.css رو نمیدونستم.
تست میکنم و مشکلی بود ازتون میپرسم. خیلی ممنون از کمکتون.

Tue, 09/13/2011 - 08:35 — amirabbas

البته کاربرد reset.css چیز

البته کاربرد reset.css چیز دیگه ای هست. هر مرورگری یه سری استایل پیش فرض به تگ ها میده. مثلا تگ پاراگراف خودش یه مارجین پیش فرض در سمت بالا و پاینش داره. حالا این مقدارها تو مرورگرهای مختلف فرق میکنه. برای اینکه همه چیز یکدست بشه و شما نگران تفاوت تو مرورگرهای مختلف نباشی، reset.css میاد همه این تفاوت ها رو صفر میکنه. الان دو تا فایل reset.css داریم. یکیش مال اریک مایر هست و یکی هم مال یاهو، مال اریک مایر معروف تره. البته بعضیها میگن که حذف همه استایل های پیش فرض خوب نیست و اومدن یه چیزی درست کردن به اسم normalize.css که توی اون فقط تفاوت هارو برطرف کردن و استایل های پیش فرض رو صفر نمیکنن http://necolas.github.com/normalize.css/

Tue, 09/13/2011 - 00:15 — arsalan (not verified)

آقا کارت خیلی‌ درسته واقعا

آقا کارت خیلی‌ درسته واقعا دستت درد نکنه کمک خیلی‌ خیلی‌ خوبی‌ کردی،من با css2.1 هم کار کردم جواب داد،مرسی‌

Tue, 09/13/2011 - 07:07 — منتظر (not verified)

سلام آقا دمت گرم خیلی مفید و

سلام
آقا دمت گرم
خیلی مفید و مهم و پرکاربرد بود. من مشکل همین فونت های فارسی با پسوند های woff و eot رو داشتم.
دستت درد نکنه
فقط چرا کم پیدا هستین؟

Tue, 09/13/2011 - 08:36 — amirabbas

والا به خاطر گرفتاری.

والا به خاطر گرفتاری. انشاالله یه سری برنامه برای ماه های آتی داریم که بیشتر میایم (اگر خدا بخواد)
:)

Fri, 09/16/2011 - 04:18 — mohamad (not verified)

سلام امیرعباس عزیز؛ ازت ممنون

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

Fri, 09/16/2011 - 09:55 — amirabbas

محمد جان یه دو سه کاری توی

محمد جان یه دو سه کاری توی نوبت طراحی داریم. اگر از نظر زمانی مشکلی نداری برام میل بزن. ایمیلم که تو ستون کناری هست ;)

Sat, 09/17/2011 - 19:50 — علی (not verified)

با سلام دستورات مربوط به

با سلام
دستورات مربوط به فونتها بخوبی در ff6 , ie8 جواب داد ولی هنگام چاپ در ff6 فونتهای پیش‌فرض سیستم چاپ میشود اما در ie8 بصورت صحیح جواب میدهد
هنگام فراخوانی فایل css در قسمت media از عبارت print , all هم استفاده کردم ولی تغییری حاصل نشد
آیا راه حلی برای این مشکل وجود دارد

با تشکر

Sat, 09/17/2011 - 20:42 — amirabbas

سلام. دوست عزیز مشکل از شما

سلام. دوست عزیز مشکل از شما نیست. مرورگر فایرفاکس هنوز پشتیبانی از فونتهای پیوست شده به صفحه وب رو برای CSS مخصوص پرینت، پشتیبانی نمیکنه و هیچ راهکاری هم براش وجود نداره https://bugzilla.mozilla.org/show_bug.cgi?id=468568. البته رفتار بقیه مرورگرها هم خیلی استاندارد نیست. مرورگر کروم بعضی از فونتها رو درست نشون میده و بعضی دیگه رو به هم ریخته نشون میده. تو جستجویی که کرده بودم، حتی برای فونتهای انگلیسی هم این مشکل توی مرورگر کروم وجود داشته. مرورگر سافاری هم که روی سیستم من وقتی بخوام صفحه ای که توش فونت هست رو پرینت کنم، کلا کرش میکنه و از کار میافته. ظاهرا مرورگر اپرا هست که مشکلی تو این زمینه نداره.

Tue, 09/20/2011 - 06:26 — Ali Moradizadeh (not verified)

بسیار عالی ! ممنون از این

بسیار عالی !
ممنون از این مقاله خوب و کامل

Wed, 09/21/2011 - 01:12 — Ali Moradizadeh (not verified)

با سلام شما در این مقاله

با سلام
شما در این مقاله خوبتون فرموده اید که :
@font-face { font-family: 'yekan’; src:url('fonts/yekan.eot?#’) format(‘eot’), url(‘fonts/yekan.ttf’) format(‘truetype’); }

با این ترفند، مرورگر اینترنت اکسپلورر تنها خط اول را می بیند و تنها فایل EOT را دریافت می ‌کند در حالی که مرورگرهای دیگر خط اول را نادیده گرفته و خط دوم رو می‌خوانند و فونت TTF را دریافت می‌کنند

سوال 1 . آیا مرورگر های دیگه ( بجز ie ) کلا خط اول را نادیده گرفته و خط دوم را انتخاب می کنند ؟ یا بدلیل اینکه خط اول فونت EOT هست آنرا نادیده گرفته و نوعی رو که ساپورت می کنند رو انتخاب میکنند ؟
مثلا اگر ما اصلا با ie6-8 سرو کار نداشته باشیم کد رو به اینصورت بنوسیم درسته ؟
@font-face { font-family: 'yekan’; src:url('fonts/yekan.woff') format('woff'), url(‘fonts/yekan.ttf’) format(‘truetype’); }

سوال2. نمیشه کد رو طوری نوشت که اول woff و بعد truetype و در آخر EOT باشه که ie طبق عادتش خط آخر رو انتخاب کنه و مرورگر های دیگر هم بسته به نوعشون خط اول یا دوم که نیازه هم به هک نباشه ؟
lمثلا :
@font-face { font-family: 'yekan’; src:url('fonts/yekan.woff') format('woff'), url(‘fonts/yekan.ttf’) format(‘truetype’), url('fonts/yekan.eot’) format(‘eot’); }

Wed, 09/21/2011 - 01:18 — amirabbas

اگر دستور EOT رو آخر بنویسید

اگر دستور EOT رو آخر بنویسید مشکل پیش میاد. IE فرمت هایی که ساپورت نمیکنه رو هم دانلود میکنه. یعنی فایل WOFFرو دانلود میکنه ولی نمیتونه نمایشش بده. به همین خاطر باید دستور EOT اول باشه که آی ای فقط همون خط رو ببینه. مرورگرها دیگه هم به ترتیب الویت میان و فرمت مناسب خودشون رو دریافت میکنن. مثلا تو فایرفاکس اولویت با WOFF هست و اگر این فرمت نبود به جاش TTF رو دانلود میکنه. مرورگرهای جدید چون فرمت EOT رو پشتیبانی نمی کنند به همین خاطر خط اول رو نادیده میگیرند

Fri, 09/23/2011 - 20:52 — mojtaba (not verified)

آقا من استفاده کردم بدون هیچ

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

Tue, 09/27/2011 - 18:18 — حاج غلام (not verified)

آقا میشه فونت فونت نازنین

آقا میشه فونت فونت نازنین بولد رو هم بذاری ، یا حداقل بگی چجوری میشه فونت های فارسی رو قبل از تبدیل به فونت وب اصلاح کرد که تو فایرفاکس 6 درست کار کنه ؟ ، من هر کاری که کردم بعد از کانورت فونتها همه حروف بزرگ نمایش داده میشه. مقاله ات حرف نداره !

Wed, 09/28/2011 - 03:31 — amirabbas

عزیز داخل مقاله همین رو هم

عزیز داخل مقاله همین رو هم توضیح داده بودم. برای تبدیل فونت شما از سایت http://onlinefontconverter.com/ استفاده کنید. فونت رو به سایت بدید و خروجی TTF و WOFF رو از این سایت بگیرید. بعد فایل های جدیدی که دریافت می کنید اصلاح شده هست. برای فرمت EOT هم باید به سایت http://www.kirsle.net/ برید و فایل TTF جدید رو بدید و خروجی EOT بگیرید. بقیه موارد هم که مشخصه طبق الگوی توضیح داده شده توی مقاله هست ;)

Fri, 09/30/2011 - 06:59 — ساسان (not verified)

مرسی امیرعباس حرکت جالبی بود.

مرسی امیرعباس حرکت جالبی بود. البته همون‌جوری که گفتی این فونت‌ها باید اصولی درست بشن مثلا هیچ کدوم hinting و نشونه گذاری درست ندارن، فونت فارسی باید glyphهای لاتین مناسب و متناسب هم همراهش باشه. مساله‌ی بعدی لایسنس فونت هست که این‌ها اصلا از کجا اومدن. جالبه بدونی فونت‌های نازنین و میترا کار چند طراح انگلیسی و به سفارش عرب زبان‌ها بوده و اسم اصلی‌شون این نیست و پولی هستن، همچنین فونتی که bcc استفاده می‌کنه و اون دوست‌مون گداشته تو سایتش!
فونت Iranian Sans رو با سایت http://onlinefontconverter.com تبدیل کردم. دوست داشتی بزار تو مجموعه‌ت ;)
http://min.us/lv9urYWT5OFpZ

Wed, 10/12/2011 - 22:00 — amirabbas

ساسان فونت ایرنین سانس کلا

ساسان فونت ایرنین سانس کلا مشکل نداشت از اول. این فونت چون اخیرا طراحی شده بر اساس استاندادرهای روزه و داخل فایرفاکس به هم نمی ریخت. احتیاجی به طی کردن این مراحل نداشتید. برای پک فونت هم ما برنامه های دیگه ای داریم که تعداد فونت بیشتری رو در اختیار بقیه قرار بدیم ;) البته در آینده

Tue, 10/18/2011 - 14:07 — ساسان (not verified)

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

نمی‌دونم باکدوم نسخه‌ش کار کردین (انگار یه نسخه دستکاری شده به اسم IranianSansZ هم داره) ولی حروف وقتی به عنوان وب‌فونت ازش استفاده میکردم تو فایرفاکس ۶ به بالا جدا از هم نشون داده میشد، توی کروم هم درست کنار هم قرار نمیگرفت. بعد از تبدیل با اون سایت به طرز معجزه آسایی تمام مشکلاتش رفع شد!
امیدوارم این‌مجموعه فونت‌هاتون رو گسترش بدین وحتی سایتی شبیه typekit.com برای استفاده هرچه راحت‌تر ازش راه‌بیندازید :)

Navigation

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

Post new comment