در نوشته قبلی درباره سرویس فونت گوگل بحث کردیم . اما در این پست می خواهیم به این نتیجه برسیم که نیاز چندانی هم به این سرویس نداریم.
در این نوشته خواهید آموخت :
- چگونه از فونت های فارسی در وب استفاده کنیم .
- آماده سازی فونت برای وب .
- نوشتن دستورات برای تمام مروگرها ( حتی IE6 ) .
چرا می خواهیم از این دستور و یا اصولا از این روش استفاده کنیم ؟
همان طور که می دانید فونت های فارسی ایمن ( موجود در تمام کامپیوتر ها ) محدود به دو فونت arial و Tahoma است. و اگر بخواهید از یک متن را با فونتی خواص نشان دهید مجبور هستید یا از عکس استفاده کنید یا اینکه از جاوا اسکریپت و یا فلش کمک بگیرید که مطمئنا حجم بالایی از داده را به سایت تحمیل می کنند و در ضمن مسئله پشتیبانی از تمام مرورگرها ( cross browser ) هم وجود دارد .
اما ما امروز با css به راحتی این کار را بهتر و سریع تر انجام می دهیم همچنین حجم داده کمتری بر سایت اضافه می شود .
خوب حالا که به فواید این کار پی بردید به سراغ مرحله اول می رویم . ساختار کلی دستور :
@font-face {
font-family: Graublauweb;
src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */
url('Graublauweb.woff') format('woff'), /* Modern Browsers */
url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */
url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}
همان طور که در کد هم مشخص است دلیل چند دستور شدن این مشخصه وجود مرورگر های مختلف با سینتکس های متفاوت است .
حالا به سراغ بررسی کد می رویم :
خط اول کد شروع دستور است و خط دوم ما نام صورت فونتی که می خواهیم ایجاد کنیم می نویسیم . ( اسم دلخواه ) و پنچ خط بعدی کار یکسانی انجام می دهند البته در موررگر های متفاوت تاثیر دارند.
خب با دیدن این همه فایل این سوال پیش ما آید که چگونه این ها را بدست آوریم ؟
مثل همیشه یک راه میان بر وجود دارد ! و آن هم سایت @font-face Kit Generator است
ابتدا باید دکمه add Fonts را زده تا فونت ها آپلود شوند . سپس شما فونت ها در کادر زیر دکمه مشاهده می کنید . در اینجا من فونت هما را انتخاب کرده ام . در مرحله بعد می توانید کد خروجی را به میل خود تغییر دهید . من مدل بهینه (optimal ) را انتخاب کرده ام . در نهایت با زدن تیک Agreement دکمه دانلود فعال می شود . بعد از زدن دکمه download your kit سایت به شما یک فایل فشرده (zip ) می دهد . اما محتویات این فایل چیست :
فونت مورد نظر شما در تمامی فرمت های لازم ( eot , ttf , woff svg )
یک فایل css و html که حاوی نمونه استفاده از فونت شماست .
کد css مورد نیاز ما در stylesheet.css است . محتویات این فایل را در فایل css خود کپی کنید .البته بدیهی است که فونت ها را نیز باید به محل سایت خود منتقل کنید .
@font-face {
font-family: 'BHomaRegular';
src: url('bhoma-webfont.eot');
src: url('bhoma-webfont.eot?#iefix') format('eot'),
url('bhoma-webfont.woff') format('woff'),
url('bhoma-webfont.ttf') format('truetype'),
url('bhoma-webfont.svg#webfontI05wzgXm') format('svg');
font-weight: normal;
font-style: normal;
}
خب قدم بعدی چیست ؟! لذت بردن از استفاده از این کد ! .
برای استفاده فقط کافی است به تکی که می خواهید متن آن با این فونت نمایش داده شود این کد css را اضافه کنید :
font-family: 'BHomaRegular';
امیدوارم پست مفیدی بوده باشد . منتظر نظرات شما برای بهبود نوشته های آینده هستم .
با سلام و تشکر از نوشته شما،
من چندین سال پیش این آیتم رو تو اکثر قالب های تجاری دیده بودم، ولی وقتی قضیه حجم صفحه از شاخص های سایت شما باشه استفاده از فونت فیس خیلی گرون قیمته و کمتر کسی استفاده می کنه.
تمام حجمی که به سایت اضافه می کنه ۵۰ Kb است ! .این خیلی زیاده ؟ استفاده از عکس حجم بیشتری می گیره
در سایت های خبری بله!
بازه حجم ویترین (صفحه اول) بین ۲۰۰ تا ۳۵۰ کیلوبایت
بازه حجم صفحات داخلی بین ۵۰ تا ۱۵۰ کیلوبایت
این استاندارد رو چه کسی تعیین کرده و چه سالی ؟!!!
در ضمن این فونت کش میشه ! شما به وضع طراحی وب توی ایران نگاه کردید و این حرف رو زدید ؟!
این یک استاندارد قراردادی هست که با تحقیق شبکه های خبری تهیه شده و اسمش news site standard هست. سالش هم ۲۰۰۹ هست. توی ایران وضع به مراتب بدتر از سایر کشورها هست. سرعت اینترنت رو بررسی کنید متوجه میشید.
کش شدن فونت ها گزینه ی خوبی هست که باعث میشه فقط یکبار لود رو داشته باشیم. نکته مثبتیه، موافقم
البته font-face استاندارد w3c.org هست و همه مرورگرهای استاندارد حتما حتما باید ازش پشتیبانی کنند. و تمامی برنامه نویسان توصیه میشن ازش استفاده کنند. هیچ توصیه ای درباره حجم هرگز بصورت استاندارد منتشر نشده و صرفا نظر شخصی هستند.
سایت سال دنیا در سال ۲۰۰۸ حجم ۸ مگا بایتی داشت!
ecodazoo.com
بسیار عالی بود. ممنووووووون
تشکر از این آموزش مفید!!
جدای از مباحثی مثل حجم صفحه که اگر ۵۰ ک.ب باشد واقعا استفاده اش نسبت به عکس بهتر است، استایل صفحه موزد نظر ما در استفاده از این تکنیک به مراتب بهتر از عکس هستش! به طور مثال در یک عمل hover اگر عکس B دیر لود شود یا زودتر لود شود نمای جالبی رو نمی بینیم که با استفاده از این تکنیک این مشکل حل میشه!
نظر من است البته!
سلام
ممنون از مطلب جالبت.
شما موفق شدید فونت خودتون رو آپلود کنید و نتیجه بگیرید. متاسفانه من با هر فونتی که تست میکنم، بدون اینکه آپلود بشه خطای I/O می‌گیرم !
من هم همین مشکل رو دارم. در آخر فایل های فونت استخراج نمیشود !
من سعی کردم این کار را انجام دهم ولی نشد. از فونت B Yekan و B Homa استفاده کردم ولی نشد. جالب اینه که وقتی خود فایل های html تولید شده از اون سایت رو هم استفاده کردم نتیجه ای نگرفتم. مشکل من کجاست. باید بگم که از لینوکس استفاده می کنم. توی ویندوز هم همین مشکل رو دارم.
داخل فایل html نمو نه استفاده شده فونت رو قرار داده ! . وقتی شما خروجی رو دانلود می کنید یعنی همه چی خوب انجام شده .
حق با شماست داخل فایل هست ولی نمونه نوشته ها به انگلیسی هستن. من با فارسی مشکل دارم و نمودنم اشکال کارم کجاست. خوب روند کار خیلی ساده است ولی من هیچ نتیجه درسی نگرفته ام البته سایت انگلسی رو هم گشته ام ولی مشکلم حل نشده است.
البته مساله cache شدن این فونتها رو با htaccess و سایر تنظیمات سرور، باید در سرور تنظیم کرد تا header های لازم رو بفرسته. نکته دیگه اینکه اگه کسی سرعتش پایین باشه (مثلا دیالآپ) مشکلی پیش نمیاد و سایت رو با قلم معمولی می‌بینه.
یا شما خودتان از این روش در وب سایتی استفاده کرده اید. بعد از دو سه روز جستجو به این نتیجه رسیدم که برای فونت های عربری و فارسی این روش غیر عملی است بخصوص اگر از وب سایتی معرفی شده برای تولید فونت ها استفاده شود. البته مبدل دیگری است که نتیجه خیلی بهتری دارد من از این روش به طور آزمایشی در وب سایت http://www.respinar.com استفاده کرده ام. نه در همه مرورگرها و سیستم عامل ها، بلکه در نصف اونها متن ها درست نمایش داده می شوند.
باید بگم وب سایت خوبی دارید و مقالات و موضوعات مطرح شده جالب هستند. موفق باشید.
چند نمونه دیگه برای تبدیل فونت :
http://www.freefontconverter.com/
http://www.kirsle.net/wizards/ttf2eot.cgi
http://fontforge.sourceforge.net/
سلام
من فونتهامو دانلود کردن و تو CSS هم قرار دادم ولی نمیدونم فونت هارو کجای سایتم باید آپلود کنم که کار کنه. در حال حاضر فونت من کار نمی کنه
توی پوشه ای که فایل css شما وجود داره.
عــالی بود . دستتون درد نکنه
سلام
دستت درد نکنه
اما، این سایت هم مثل بسیاری از سایت های دیگه در تبدیل فونت های فارسی با مشکل مواجه است
باید در هنگام تبدیل از BASIC به جای OPTIMAL استفاده کنید که فارسی را پشتیبانی کند، اما باز هم حروف را به صورت جدا از هم مانند ع ل ی می نویسد
اگر کسی راه حل را پیدا کرد! حتما به ایمیل من ارسال کند، با تشکر از شما ([email protected])
مشکل جداجدا شدن از خود فونت است . فونت مناسب را پیدا کنید.
شما از چه فونتی استفاده کردید که مشکل جدا جدا شدن رو ندارید؟
من از سری B فونت یکان رو تست کردم همین مشکل رو داشت.
فونتی که سایت معرفی شده درست میکنه واسه مرورگر اینترنت اکسپلورر هماهنگی خوبی داره
در ضمن دوستان میتونن از فونتی که سایت بی بی سی استفاده کرده ، استفاده کنن
من این فونت رو دانلود کردم و استفاده هم میکنم
اینم از لینک فونت ها:
http://www.bbc.co.uk/worldservice/fonts/persian/nassim/bbc-nassim-regular.eot
http://www.bbc.co.uk/worldservice/fonts/persian/nassim/bbc-nassim-regular.woff
http://www.bbc.co.uk/worldservice/fonts/persian/nassim/bbc-nassim-regular.ttf
اینم از دستور استفاده صحیح :
@font-face {
font-family: “BBCNassim”;
src: url(“http://www.bbc.co.uk/worldservice/fonts/persian/nassim/bbc-nassim-regular.eot”);
src: local(“☺”),
url(“http://www.bbc.co.uk/worldservice/fonts/persian/nassim/bbc-nassim-regular.woff”) format(“woff”),
url(“/worldservice/fonts/persian/nassim/bbc-nassim-regular.ttf”) format(“truetype”);
font-weight: normal;
font-style: normal;
}
ممنون . فونت BBCNasim برای من کار کرد . فونت قشنگیه !
فکر می کنم این فونت تجاریه:
http://www.atrissi.com/index.php?pageID=46
توی سایت منتشر کننده ۱۰۰ دلار برای ۵ یوزر زده بود. حالا نخریم و استفاده کنیم چی میشه؟
اولا تمامی راه حل های ذکر شده برای فونت های فارسی جواب نمی دن و باید از خود فونت اصلی استفاده کنید که برای همه مرورگرها جواب نمی ده. ولی یه نرم افزار آنلاین هست که تقریبا مشکل فونت های فارسی و جدا شدن کاراکترها رو حل کرده، من در سیستم عامل های ویندوز و لینوکس با مرورگرهای IE6، IE9، فایرفاکس، اپرا، کروم و … امتحان کردن و می تونم بگم ۹۰٪ فونت ها درست نشون داده می شد.
این هم آدرس اون وب سایت http://www.font2web.com/ از این برنامه استفاده کنید و مشکلتون برطرف بشه.
امیدوارم روزی برسه که مشکل فونت های فارسی برای همیشه حل بشه بخصوص در cufon.
it worked like a charm. thanks
آقا درستت درد نکنه
این راه برای من کاملا جواب داد
من که به کلی از فارسی نا امید شده بودم، شما روزنه جدیدی برای من باز کردید!!!
خدا صد در دنیا و دویست در آخرت به شما بدهد!!
راستی وقتی font-face هست، آیا cufon دیگه کاربردی داره؟
من هر کاری کردم نتونستم از این روش توی پروژم استفاده کنم
دادا عالی بوووووود دربدر دنبال این قضیه بودم پیروز باشی
درود بر شما
بیشتر از اون چه فکر کنی برام مفید بود
سلام میخواستم بدونم که این روش با ای اس پی مشکلی نداره ؟ یعنی میشه ازش در دات نت هم استفاده کرد؟
با اینکه کروم تنها براوزری هستش که تمام عناصر CSS3 و HTML5 رو پشتیبانی می کنه ولی در مورد font-face با زبان فارسی و عربی مشکل داره و ساپورت نمی کنه اگه فونت انگلیسی باشه مشکلی نیس ولی فونت فارسی رو قبول نمی کنه، بنابراین این قضیه کاربردی نداره…!
اینم یه سایت دیگه واسه تبدیل فونت:
http://onlinefontconverter.com
در ضمن مشکل جداشدن کاراکترها ربطی به فونت نداره مربوط به تنظیماتی داره که به صورت پیش فرض در سایت http://www.fontsquirrel.com/fontface/generator قرار داده شده که اگه دقت کنید می تونید حلش کنید، اگه با سایتی که بالا لینکش رو گذاشتم تبدیل کنین مشکلی پیش نمیاد.
بازم در ضمن این موارد css هستن که ربطی به زبان برنامه نوییسی ندارن پس با ای اس پی هم میشه استفاده کرد.
واقعا ممنون از راهنماییت . من یکی که داشتم می مردم
اینقد که css رو سیخ زدم
سلام
جناب ترابزاده، من هر کاری کردم نتونستم از این روش استفاده کنم.
طبق فایل نمونه ای که سایت میده عمل کردم. فونت ها را در کنار فایل های داده شده در سایت قرار دادم.
فایل سی اس اس را اضافه کردم و حتی کدهای جاوا را نیز استفاده کردم !
اما جواب نگرفتم
لطفا راهنمایی بفرمایید
با تشکر
روش مشکل نداره، مشکل از فونت هایی هستش که از سایت http://www.fontsquirrel.com/fontface/generator دریافت کردید، همونطور که گفتم تنظیمات این سایت یه ذره تخصصی هستش و به درد نمی خوره از سایت های دیگه برای تبدیل فونت استفاده کنید.
ضمنا کروم با بعضی فونتها مشکل داره و ساپورتشون نمی کنه، پس اگه دیدید که تو کروم درست دیده نمی شه نگران نشید تو Firefox و IE امتحان کنید اگه تو اونا درست بود مشکل از فونت هستش.
اگه موفق نشدید از کد زیر استفاده کنید، لینک دانلود فونتها رو هم براتون می ذارم.
@font-face{
font-family:"TNassim";
src: url("TNassim.eot");
src: local("☺"),
url("TNassim.woff") format("woff"),
url("TNassim.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
لینک فونتها:
http://trkala.com/font/TNassim.eot
http://trkala.com/font/TNassim.ttf
http://trkala.com/font/TNassim.woff
بابت قرار دادن فونت ها متشکرم ، خیلی کار راه انداز بود
به نظر من استفاده از این روش واسه زمانی که بخوایم Page رو با گرافیک بالا و زیبا طراحی کنیم خیلی خوبه و ارزش ۵۰ – ۶۰ کیلوبایت حجم اضافه رو داره.
مرسی.
سلام
دوستا الان بهترین تبدیل کننده برای فونت های فارسی کدوم سایت هستش؟
سلام
این سایت
http://www.fontsquirrel.com/fontface/generator
موقع آپلود همش I/O Error میده و چیزی آپلود نمیکنه! آپلودرش هم فلش هست.
من احتیاج مبرمی به این سرویس دارم . لطفا راهنمایی کنید.
اگر زحمتی نیست ایمیل بفرستید چون این کامنتها گزینه پیگیری ایملی نداره!
سلام
مرسی! عالی بود!
ساده ترین راه بنظرم استفاده از فونت ای پی آی هست . : http://www.font-api.ir
نه دردی نه خونریزی نه دردسری
فقط یه کپی پیست ساده
سلام ….
من این کد رو زدم … تو فایرفاکس ردیفه … ie9 هم نشون میده اما بقیه ie ها کدرو load نمیکنه
@font-face {
font-family: ‘B Koodak’;
src: url(‘fonts/koodak.eot’);
src: local(“FONT NAME ON THE SYSTEM”),
url(‘fonts/koodak.eot’) format(‘eot’),
url(‘fonts/koodak.ttf’) format(‘truetype’),
url(‘fonts/koodak.woff’) format(‘woff’),
url(‘fonts/koodak.svg’) format(‘svg’);
}
اینم آموزش کامل و سایت های معتبر
http://www.pcfors.com/PCF/PRO/Farsi_Font/01_Font_Face.htm
سلام
این روش رو کاملا دقیق انجام دادم . ولی فونت رو اجرا نمیکنه مرورگر !
فونت B Nazanin رو تبدیل کردم .
بازم احتمال میدم که ایراد از فونت باشه . اگه کسی فونت نازنین تبدیل شده رو داره و تو سایتش به درستی کار کرده ، بزاره لطفا
سلام
برای فایرفاکس جواب نمی ده من با چندین convertor امتحان کردم . من با فونت B nazanin کار کردم
نسخه ۳ فایر فکس جواب می ده ولی بالاتر از اون حروف فارسی جدا جدا نوشته می شه.
از طرفی سایتی مثل netbarg.com از همین روش استفاده کرده
هزار در دنیا و هزار در آخرت خیر ببینید
آقا من کلی خودمو … دادم نشد ، ولی به چیزایی دستگیرم شده هنوزم ادامه داره ، اگه فونت با فرمت otf باشه هر نوع فوت باشه نمایش داده میشه مثله dastnevis.otf ولی اگه ttf باشه کار نمیکنه یه چیز دیگه که اگه اون فوت در بین فونت های ویندوزی باشه کافیه که اسمشو بدونه fon-face بدی کار میکنه ولی اگه نباشه با font-face هم کار نمیکنه !!!!
دوستان عزیزی که مثلا نازنین رو میخان استفاده کنن
در انتها جاهایی که دارند واسه استفاده ، باید به حای مثلا BNazaninBold
باید بزنن
b nazanin
فونتهای فارسی واسه من روی فایرفاکس که اینطوری کار کرد
امتحان کردنش ضرری نداره
البته شاید بهم بخندینا ولی الان تقریبا ۹۰٪ افراد فونتهای رو که شما اسم بردین رو تو کامپیوترهاشون دارن
:دی
آقا اومدم که فقط تشکر کنم…
من توی صفحات داخلی(صفحات مطالبم) از این راهنمایی که کردید استفاده کردم و فونت سایت بی بی سی رو به کار بردم ، زیبایی خاصی به سایتمون داد….
ممنونم…
آقا داود فق یه سوال، ببخشید که اینجا مطرح میکنم:
چه جوری میتونیم دیدگاه مدیر سایت رو از بخش آخرین دیدگاه ها حذف کنیم؟
ممنون میشم راهنمایی کنید.
چه طور میشه از نمایش جدا جدای حروف در برخی مرورگرها جلوگیری کرد؟؟؟
متشکرم