استفاده از فونت هاي مختلف در طراحي وب

[h.emamie]

براي افزودن يك فونت خاص به صفحات وب مرورگر IE يك استاندارد تحت عنوان EOT يا Embedded OpenType دارد كه با استفاده از آن مي توان يك فونت را به صفحه خود بيافزاييد ، اين استاندارد هم اكنون به صورت استاندارد در CSS3 مورد استفاده قرار گرفته و مرورگرهايي مثل Firefox نيز آن را دارا مي باشند :

مراحل :

1. ابتدا فونت TrueType مورد نظر خود را بايد تبديل به eot نماييد ، اين كار را با نرم افزار ttf2eot كه ضميمه شده است مي توانيد انجام دهيد :

در cmd از اين دستورات استفاده نماييد :

C:\>ttf2eot.exe c:\windows\fonts\arial.ttf c:\output.eot


2. پس از تبديل فايل ها (ttf,eot) را در محل فايل html خود قرار دهيد و دستورات زير را به بالاي css خود اضافه كنيد :



@font-face {
font-family: font-name;
src: url("./mitra.eot") /* EOT file for IE */
}
@font-face {
font-family: font-name;
src: url("./mitra.ttf") format("truetype"); /* TTF file for CSS3 browsers */
}
همانطور كه مشاهده مي نماييد در قسمت src آدرس فايل ها قرار مي گيرد ، قسمت اول مربوط به IE و قسمت دوم مربوط به مرورگرهاي با قابليت css3 مي باشد .
در قسمت font-name هم يك نام دلخواه براي براي فونت خود انتخاب مي نماييد .

3. بعد از اين مرحله فونت مورد نظر به صفحه افزوده شده است و شما جهت استفاده از آن لازم است كه از آن با نام دلخواهي كه گذاشته ايد در font-family مانند يك فونت معمولي استفاده كنيد :


body{font-family:font-name,Tahoma, Geneva, sans-serif;font-size:12px;}

[Mostafa_Dindar]

سلام .
آيا من درست متوجه شدم ؟ يعني اگر بخواهيم از يك فونت خاصي در وب سايتمان استفاده كنيم كه ديگران اون فونت رو نداشته باشند(مثلا B_Yagout) . باز هم امكان پذير هست ؟

[h.emamie]

آره كاملا درسته .

[Mostafa_Dindar]

مرسي . جالب بود . در مورد مكانيزم كارش هم اطلاعي داري ؟ يعني اين اين Embedded OpenType ها چطور كار ميكنند ؟

[h.emamie]

نه در رابطه با عملكرد eot اطلاعاتي ندارم .:لبخند:

[mortezamacro]

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

http://www.weapi.co.cc/fa/research/articles/web/6-wofffarsifonts

[bahar_engineer]

من امروز این لینک رو پیدا کردم
یه فرمت جدید به اسم WOFF
برای اضافه کردن به مرورگرها ...
http://www.weapi.co.cc/fa/research/articles/web/6-wofffarsifonts

[bahar_engineer]

من با این روش ها به نتیجه نمی رسم!
فونت رو با فرمت های مختلف دارم و توی استایل هم کدهای font face رو گذاشتم
توی یه صفحه ساده پیاده سازی کردم
ببینید مشکل چیه به نظر شما؟

ممنون

[gardeshgar]

يه تحقيق در باره SIRF تو گوگل بكنيد

مشكلتون رو بهترين شكل و به ساده ترين شكل حل مي كنه

همه فونت هارو مي تونيد استفاده كنيد. بدون نصب و يا اضافه كردن به مرورگر و يا هر محدوديت ديگه!

[trade_mark]

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

[fakhravari]

با سلام
اگر ممکن در مورد این روش توضیح بدن در مورد این dos که نمیدونم چی اصلا.
و یه سوال دیگه که این روش روی چه مرورگرهایی کارایی داره.

[hobab-theme]

بسیار ممنون از دوست خوبم بخاطر این آموزشش.
در تکمیل صحبتهای ایشون :
برای اینکه بتونیم به ساده ترین ، بهترین و مطمئن ترین حالت ممکن فونتها رو نمایش بدیم باید از یک هک استفاده کنیم. این کار IE رو گیج میکنه و به اشتباه میندازه :

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

بخاطر اینکه IE از مدتها پیش از فرمت EOF پشتیبانی می کنه ابتدا این فرمت رو میذاریم. خوب IE خط اول رو می خونه، فونت رو بارگذاری میکنه و بدلیل وجود دو علامت ?# بقیه خطوط رو نادیده میگیره.
مرورگرهای دیگه هم خط اول رو نادیده میگیرن و فونت TTF رو میگیرن.
میرسیم بر سر فونت WOFF. مرورگرهای جدید از این فرمت پشتیبانی میکنن. این فرمت جدید و کم حجم تر از سایر فرمتها هست. چنانچه کاربری از مرورگرهای جدید استفاده کنه، این فونت بارگذاری میشه تا حالشو ببره:چشمک:

پی نوشت :
نکته مهم در رابطه با این هک ترتیب نوشتن اون هست که دقیقا به همین شکل باشه. در غیر اینصورت IE حال شما رو خواهد گرفت:اشتباه:

موفق باشید

[fakhravari]

این فرمت از کجا گیر بیاریم؟

woff
فقط مشکل در fox

[Saber Mogaddas]

سلام
از این لینک (http://www.font2web.com/) استفاده کن..فونت شما رو به همه پسوند ها تبدیل میکنه..
موفق باشی..

[fakhravari]

با سلام
از این لینک هم تبدیل کردم http://www.font2web.com
بازم در fox خراب نشون میده.
روی مرورگر ویژال زده Css2.1 :متفکر:

[hobab-theme]

شما برای تبدیل فونت ها به WOFF از وب سایت http://onlinefontconverter.com استفاده کن. این بهترین گزینه هست

[Saber Mogaddas]

سلام تو بعضی از فونت های خاص جدا نشون میده .. شما چرا از bifon (http://barnamenevis.org/showthread.php?306758-Cufon-%D8%B1%D8%A7-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D9%86%DB%8C%D8%AF-%28Bifon%29&highlight=bifon) یا cufon (http://cufon.shoqolate.com/generate/) استفاده نمی کنید ؟
موفق باشی..

[fakhravari]

ممنون.
متاسفانه خیلی بد تبدیل میشه.
لینکی ندارید که کل فونتهای B فارسی تبدیل کرده باشه.
__________
حالا یه مشکل دیگه
که این سایت http://onlinefontconverter.com
وقتی تبدیل میکنم فقط روی fox جواب میده و روی IE جواب نمیده.
و opera هست که همشو اجرا میکنه
@font-face { font-family: 'Font_Naz'; src: url('BNazanin.eot');
src: local('☺'), url('BNazanin.woff') format('woff'), url('BNazanin.ttf') format('truetype'), url('BNazanin.svg') format('svg');
font-weight: normal; font-style: normal;}

[sanay_esh]

با سلام و خسته نباشید شما میتوانید از این لینک (http://www.averta.net/wiki/fa/page/Bifon) استفاده کنید تمامی مشکلات شما رو حل میکنه فقط کمی حوصله بفرمائید و توضیحات را بخوانید

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

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

[sanay_esh]

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

[hobab-theme]

متاسفانه خیلی بد تبدیل میشه.
لینکی ندارید که کل فونتهای B فارسی تبدیل کرده باشه.
میخواستم براتون همینجا فونتها رو بذارم ولی متاسفانه چند روزه اینترنت افت سرعت وحشتناکی کرده و نمیتونم .(حتی این صفحه هم به زور بعد از 10 دقیقه بالا میاد!!!). ببینم اگر شب درست شد براتون همین جا میذارمشون تا هم شما هم بقیه استفاده کنید.

حالا یه مشکل دیگه
که این سایت http://onlinefontconverter.com
وقتی تبدیل میکنم فقط روی fox جواب میده و روی IE جواب نمیده.
IE از فونتهای TTF و WOFF پشتیبانی نمی کنه (البته ورژن 9 به پایین). و شما باید از فونت EOT برای IE استفاده کنید. می تونید از طریق این سایت http://kirsle.com فونتهای خودتون رو به EOF تبدیل کنید. این سایت هم در حال حاضر بهترین گزینه برای تبدیل فونتهای فارسی بدون اشکال هست.(البته ممکنه چندتای دیگه هم باشه!! ولی برای فارسی این خوب عمل میکنه)
-----------------------------
پی نوشت :
انشاالله اینترنت درست شد فونتها رو قرار میدم
موفق باشید

[fakhravari]

با سلام
ممنون میشم زودتر این کار کنید.
خوب حالا چطوری همه رو به طور صحیح نمایش دهیم.
که دیگه در fox , IE درست نمایش بده:افسرده:

[hobab-theme]

دوستان همون طور که قول دادم و البته اینترنت جون:لبخند: راضی شد! اینجا فونتها رو میذارم تا همه استفاده کنید.
و البته هرچند تو پست بالایی یه مثال هم از نحوه استفاده زدم و همچنین دوستان هم مثالهایی رو زده بودند ولی یه مثال کامل رو هم اینجا میارم تا دیگه تکمیل شه.

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

نحوه استفاده :

تنها نکته ای که باید در مورد کلاسی که مینویسید در نظر داشته باشید اینه که فونتها رو حتما ابتدای تمام استایلها بذارید. چرا ؟
چون اگر از جایی فونتتون رو صدا بزنید و بعد کلاس فونت را ایجاد کنید، به دلیل عدم بارگزاری فونت، مرورگر فونت پیشفرض رو در نظر میگیره. پس همیشه این کلاس رو ابتدای CSS خود قرار بدید.


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

دقت داشته باشید که تو این مثال از هک IE استفاده شده. پس ترتیب خطوط کد مهم هست (توضیحات بیشتر رو هم توی پست قبلی دادم:چشمک:)

حالا میخوایم از این فونت استفاده کنیم.
مثلا برای عنوان یک صفحه(منظور title که در تگ head قرار میگیره نیست!) رو میخوایم از این فونت استفاده کنیم.
ایتدا یک کلاس ایجاد میکنیم.

.title
{
font-family : 'yourName', Arial, Verdana;
font-size : 24px;
}

حالا کلاسی که ایجاد کردیم رو به المنت مورد نظر تو صفحه میدیم :


<div class="title">درد را از هر سو که نوشتیم درد بود</div>

حالا صفحه رو لود و از کار جدید خودتون لذت ببرید.
8405284053840518405484055

[hobab-theme]

اینم بقیه فونتها :

84058

و

84059

[fakhravari]

قربونت .
پس نتیجه گیری میکنیم که در گذاشتن ' singel ها دقت کنید .
@font-face {
font-family: 'F_Lts';
src:url('BLotus.eot?#') format('eot'),
url('BLotus.woff') format('woff'),
url('BLotus.ttf') format('truetype');
}
و
اکثر فونتها فارسی قابلیت تبدیل ندارند و یا بد تبدیل میشه که باعث کج شدن میشوند.:بوس:

[peyman68_2005]

@font-face { font-family: font-name; src: url("./mitra.eot")
/* EOT file for IE */ }
@font-face { font-family: font-name; src: url("./mitra.ttf") format("truetype");
/* TTF file for CSS3 browsers */
}

[ali.poorbazargan]

منکه هرکاری میکنم بازم سایتم فونت معرفی شده رو نمیخونه !

[ahmadreza.rstm]

سلام، موقعی که کلاس کد مربوطه را توی یه فایل css جدا می زارم و کلاس را تعریف می کنم، به المنت خودم که لینکش می کنم فونت را نمی خونه ولی در صفحه اصلی در قسمت Head از تگ style استفاده می کنم و اونجا کلاس را تعریف می کنم کد را می خونه. دوستان کسی می دونه چرا از فایل css نمی خونه کد را؟ در اولین خط هم اضافه کردم این کد را.
ممنون و سپاسگزارم

[armin3000]

ممنون از توضیحاتتون.
چطور میتونم کاری کنم که اگر فونت روی سیستم کاربر وجود داشت دیگه روی سیستم لود نشه؟! چون من از دو فونت متداول استفاده می کنم و احتمالا هر دو روی سیستم کاربر هست و حدود ۱۲۰ کیلو میشه که حجم زیادیه .

[tamafi6]

بخاطربالابودن حجم فونت هایکی ازساده ترین ابزار برای تبدیل فونت سرویس fontsquirrel.com (http://www.fontsquirrel.com/fontface/generator)هست این سرویس اجازه میده فونت راازکامپیوترانتخاب کنی وباچندکلیک اونهارابه فرمت های مختلف تبدیل کنیدحتی میتونیدفونت راتبدیل به base64تبدیل کنیدکه مستقیمااونراداخل فایل cssخودتون قراربدیدچونکه فونت هاازحجم بالایی برخوردارن وشماهم فقط به تعدادخاصی ازکاراکترهانیازمندیدبهتره روی expertکلیک کنی وکاراکترهای خاص خودتون راانتخاب کنیدوحجم فایل رابیاریدپایین

[shervin_20]

با عرض سلام .

دوستان بنده یک مشکل دارم . می خواهم به منو ها و تیتر های مطالب فونت 'Yekan' را بدهم . اما هر کاری میکنم نمیشه . باید دقیقا چیکار کنم ؟ چه کدی وارد کنم ؟

ایا نیاز به اپلود فایلی در هاست است ؟

لطفا راهنمایی کنید .

[shervin_20]

از دوستان کسی نیست راهنمایی بکنه ؟