# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) > آموزش: استفاده از فونت هاي مختلف در طراحي وب

## 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/a...wofffarsifonts

----------


## bahar_engineer

من امروز این لینک رو پیدا کردم
یه فرمت جدید به اسم WOFF
برای اضافه کردن به مرورگرها ... 
http://www.weapi.co.cc/fa/research/a...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

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

----------


## fakhravari

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

----------


## hobab-theme

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

----------


## Saber Mogaddas

سلام تو بعضی از فونت های خاص جدا نشون میده .. شما چرا از bifon  یا  cufon استفاده نمی کنید ؟
موفق باشی..

----------


## 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

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

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

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

----------


## 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>
```

حالا صفحه رو لود و از کار جدید خودتون لذت ببرید.
part-1-1.rarpart-1-2.rarpart-2-1.rarpart-3.rarpart-5.rar

----------


## hobab-theme

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

part-4-1.rar

و

part-2-2.rar

----------


## 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هست این سرویس اجازه میده فونت راازکامپیوترانتخاب کنی وباچندکلیک اونهارابه فرمت های مختلف تبدیل کنیدحتی میتونیدفونت راتبدیل به base64تبدیل کنیدکه مستقیمااونراداخل فایل cssخودتون قراربدیدچونکه فونت هاازحجم بالایی برخوردارن وشماهم فقط به تعدادخاصی ازکاراکترهانیازمندیدبهتره روی expertکلیک کنی وکاراکترهای خاص خودتون راانتخاب کنیدوحجم فایل رابیاریدپایین

----------


## shervin_20

با عرض سلام . 

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

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

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

----------


## shervin_20

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

----------

