خصیصه font-face در css

[eminem.encore]

لطفا دوستان راهنماییم کنن. من از این خصیصه css3 برای فونت متون وب سایتم استفاده کردم. اما انگار این خصیصه برای اینترنت اکسپلورر بالای 9 استفاده میشه و پایین تر از این نسخه جواب نمیده . اما تو بعضی از وب سایت ها دیدم که میشه باز فونت مناسب رو پایین تر از این نسخه نشون داد. چطور میتونم این کارو بکنم. با تشکر


@font-face
{
font-family:BYekan;
src:url(../font/BYEKAN.TTF);
}

[mehdi.mousavi]

سلام.
برای IE، از فونت های eot استفاده کنید. ضمنا، از روش پیشنهادی Paul Irish (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/) برای تعریف Font Face ها استفاده کنید.
البته استفاده از Webfont Generator (http://www.fontsquirrel.com/tools/webfont-generator) نیز میتونه بهتون کمک کنه.

موفق باشید.

[mehbod.rayaneh]

سلام
در تکمیل فرمایش جناب موسوی بگم ک میتونید از این پک فونت نیز راهنمایی بگیرید :
http://www.wedesign.ir/css/css3-font-face-methods-and-optimized-font-firefox6

[na_des]

بته استفاده از Webfont Generator نیز میتونه بهتون کمک کنه.

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

[mehbod.rayaneh]

سلام متوجه نشدم در این وب سایت چه کاری میشه کرد ؟:متفکر:
تو اون سایت میتونید فونت را ب فرمتهای قابل استفاده در وب (eot و woff و ttf و ...) تبدیل کنید!

[afshin9032]

تو مرورگرهای مختلف فرق میکنه ، من از کد زیر استفاده می کنم و تقریبا با تمام مرورگر هایی که کار کردم جواب میده ( تا اونجایی که یادم میاد IE6 هم جواب می داد )

@font-face {
font-family: 'FontName';
src: local(BMitra),url('fonts/font.eot'); /* IE9 Compat Modes */
src: local(BMitra),url('fonts/font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/font.woff') format('woff'), /* Modern Browsers */
url('fonts/font.ttf') format('truetype'); /* Safari, Android, iOS */
}

[na_des]

src: local(BMitra)
این بخش مفهومش چیه و چی کار میکنه ؟

[کامروا]

این بخش مفهومش چیه و چی کار میکنه ؟

میاد از فونت خود سیستم کاربر استفاده میکنه.

Checking for installed fonts with @font-face and local() (http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/)

[na_des]

خوب شما در تاپیکی دیگه ای یه نمونه کد دیگه قرار دادید !
کدومش درسته و بهتر عمل میکنه ؟

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#Anything') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
من تازه با این روش اشنا شدم و دارم یه سایت طراحی میکنم ؛ با همین روش میتونم به نتیجه برسم ؟(برا طراحی اچ تی ام ال و css از dreamwiever دارم استفاده میکنم )

[کامروا]

خوب شما در تاپیکی دیگه ای یه نمونه کد دیگه قرار دادید !
کدومش درسته و بهتر عمل میکنه ؟


ببنید توی این کد :
src: local(BMitra),url('fonts/font.eot');
اول میاد چک میکنه ببینه اگر روی سیستم کاربر فونتی به اسم BMitra وجود داشت، از اون استفاده میکنه و اگر وجود نداشته باشه میره سرغ url(). وقتی از url استفاده میکنه ، باید فونت رو لود کنه (درسته که چند کیلوبایت بیشتر نیست ولی روی سرعت تاثیر داره).


من تازه با این روش اشنا شدم و دارم یه سایت طراحی میکنم ؛ با همین روش میتونم به نتیجه برسم ؟(برا طراحی اچ تی ام ال و css از dreamwiever دارم استفاده میکنم )
آره چرا که نه.

[na_des]

دوسته عزیز ممنون از توضیحات خوبتون :لبخندساده:
ببخشید یه سوال دیگه این کدهارو در css قرار میدیم ، اونوقت برا استفاده از اون در هر بخش از نام 'mywebfont' استفاده میکنیم ؟

[کامروا]

دوسته عزیز ممنون از توضیحات خوبتون :لبخندساده:
ببخشید یه سوال دیگه این کدهارو در css قرار میدیم ، اونوقت برا استفاده از اون در هر بخش از نام 'mywebfont' استفاده میکنیم ؟

دقیقا... :لبخندساده:

[na_des]

در روت فولدر وب سایت ، فولدری با نام font ایجاد کردم و فونت YekanBolf با سه فرمت ttf ، eot، woff اضافه کردم
در css و قسمت url باید مسیر همین فونت داد ؟ ادرس دهی به چه صورته ؟url باید چه طور بنویسم ؟
و سپس برای تخصیص این فونت باید از پراپرتی font-family استفاده کرد ؟

[کامروا]

در css و قسمت url باید مسیر همین فونت داد ؟ ادرس دهی به چه صورته ؟url باید چه طور بنویسم ؟

@font-face {
font-family: YekanBold;
src: url('font/YekanBold.eot'),
local("YekanBold"), url('font/YekanBold.woff') format('woff'),
local("YekanBold"), url('font/YekanBold.ttf') format("truetype");
}


و سپس برای تخصیص این فونت باید از پراپرتی font-family استفاده کرد ؟
بله.

مثلا :
body {
font-family: YekanBold;
}

[na_des]

از این روش استفاده کردم اما فقط در firefox نتیجه داد و در IE و chrom نــــــــــــــــــه !!
:متفکر: چی کار باید بکنم ؟!

[کامروا]

از این روش استفاده کردم اما فقط در firefox نتیجه داد و در IE و chrom نــــــــــــــــــه !!
:متفکر: چی کار باید بکنم ؟!

توی Chrome و FireFox تست کردم جواب داد.

واسه IE+8 باید ?#iefix رو اضافه کنید که در نهایت بشه :

@font-face {
font-family: YekanBold;
src: url('font/YekanBold.eot');
src: url('font/YekanBold.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('font/YekanBold.woff') format('woff'),
url('font/YekanBold.ttf') format("truetype"),
url('font/YekanBold.svg') format('svg');
}

موفق باشید

[na_des]

ممنون . ولی ماله من درس نشد! :ناراحت:

[pouralijan]

اکه بخوام از چندتا فونت استفاده کنیم چطوریه ؟؟؟

[na_des]

ماله من که درست نشد ؟! ولی برا استفاده از مثلا دو تا فونت باید از دو تا دستور @font face استفاده کنید و هر جا که لازم شد ازش استفاده کنید .

[کامروا]

اکه بخوام از چندتا فونت استفاده کنیم چطوریه ؟؟؟
برای هر فونت جدیدی که میخواین اضافه کنید بایست یک @font-face اضافه کنید.
@font-face {
font-family: YekanBold;
src: url('font/YekanBold.eot');
...
}
@font-face {
font-family: Koodak;
src: url('font/Koodak.eot');
...
}


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

درست نشد! :
بدترین نوع توضیح دادن یک مشکله.:لبخندساده:

[afshin9032]

این بخش مفهومش چیه و چی کار میکنه ؟

در بعضی مرورگرها فقط از فونت های local می توان استفاده کرد ، در این قسمت نام فونت را در local قرار می دهیم تا به عنوان یک فونت local تعریف شود .

[afshin9032]

با عرض معذرت در کد یک اشتباه بود که باعث بروز سوالاتی شد .

کد اصلاح شده :


@font-face {
font-family: 'MyWebFont';
src: local(MyWebFont),url('fonts/mywebfont.eot'); /* IE9 Compat Modes */
src: local(MyWebFont),url('fonts/mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mywebfont.woff') format('woff'), /* Modern Browsers */
url('fonts/mywebfont.ttf') format('truetype'); /* Safari, Android, iOS */
}



در قسمت font-family نام دلخواه خود را برای فونت تعریف می کنید
در local نام تعریف شده در font-family را قرار می دهید

در ضمن توجه کنید که از هر فونت فارسی نمیتونید استفاده کنید ، باید از فونت های اصلاح شده استفاده کنید .

[na_des]

سلام :لبخندساده:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@font-face {
font-family: Davat;
src: url('Font/BDavat.eot');
src: url('Font/BDavat.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BDavat.woff') format('woff'),
url('Font/BDavat.ttf') format("truetype"),
url('Font/BDavat.svg') format('svg');
}
@font-face {
font-family: BHoma;
src: url('Font/BHoma.eot');
src: url('Font/BHoma.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BHoma.woff') format('woff'),
url('Font/BHoma.ttf') format("truetype"),
url('Font/BHoma.svg') format('svg');
}
.my_font1{
font-family:BDavats;
font-style:normal;
font-size:28px;
}
.my_font2{
font-family:BYekan;
font-style: normal;
font-size:28px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p class="my_font1"> به نام خداوند بخشنده مهربان </p>
<p class="my_font2">به نام خداوند بخشنده مهربان </p>
<p>به نام خداوند بخشنده مهربان</p>
</body>
</html>

[کامروا]

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

شما اومدی فونت Davat و BHoma رو اضافه کردید اما توی کلاس myfont_1 و myfont_2 نام این فونت ها رو ندادین !!

باید بشه اینطوری :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@font-face {
font-family: Davat;
src: url('Font/BDavat.eot');
src: url('Font/BDavat.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BDavat.woff') format('woff'),
url('Font/BDavat.ttf') format("truetype"),
url('Font/BDavat.svg') format('svg');
}
@font-face {
font-family: BHoma;
src: url('Font/BHoma.eot');
src: url('Font/BHoma.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BHoma.woff') format('woff'),
url('Font/BHoma.ttf') format("truetype"),
url('Font/BHoma.svg') format('svg');
}
.my_font1{
font-family:Davat;
font-style:normal;
font-size:28px;
}
.my_font2{
font-family: BHoma;
font-style: normal;
font-size:28px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p class="my_font1"> به نام خداوند بخشنده مهربان </p>
<p class="my_font2">به نام خداوند بخشنده مهربان </p>
<p>به نام خداوند بخشنده مهربان</p>
</body>
</html>

[na_des]

شرمنده ولی این وقتی رخ داد که هی اسامی تغییر دادم :خجالت:
حتی با انتخاب فونت های درست و کد که شوما هم گذاشتید مشکل به قوت خودش باقیه !؟
من بارها امتحان کردم اینم یه نمونه دیگه ولی بازم درس نشد !



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css" media="all">
@font-face {
font-family: BYekan;
src: url('Font/BYekan.eot');
src: url('Font/BYekan.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BYekan.woff') format('woff'),
url('Font/BYekan.ttf') format("truetype"),
url('Font/BYekan.svg') format('svg');
}
@font-face {
font-family: BHoma;
src: url('Font/BHoma.eot');
src: url('Font/BHoma.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BHoma.woff') format('woff'),
url('Font/BHoma.ttf') format("truetype"),
url('Font/BHoma.svg') format('svg');
}
.my_font1{
font-family:BHoma;
font-style:normal;
font-size:28px;
}
.my_font2{
font-family:BYekan;
font-style: normal;
font-size:28px;
}
</style>
</head>

<body>
<p class="my_font1"> به نام خداوند بخشنده مهربان </p>
<p class="my_font2">به نام خداوند بخشنده مهربان </p>
<p>به نام خداوند بخشنده مهربان</p>
</body>
</html>


این که مشکلی نداشت . از فایل css اکسترنال هم استفاده کردم
میدونم کار ساده ای اما نمیدونم چرا درس نمیشه ! بخش local هم اضافه کنم شاید درس شه !

[کامروا]

دمو زیر داره واسه من جواب میده.
شما هم تست کن ببین جواب میده یا نه. از یک سایت دیگه دارم فونت ها رو میگیرم.

دمو بصورت آنلاین
(http://jsfiddle.net/dVQUa/1/)

@font-face {
font-family: 'BYekan';
src: url('http://www.sepordegozar.ir/WebFonts/BYekan.eot');
src: url('http://www.sepordegozar.ir/WebFonts/BYekan.eot?#iefix') format('embedded-opentype'),
url('http://www.sepordegozar.ir/WebFonts/BYekan.woff') format('woff'),
url('http://www.sepordegozar.ir/WebFonts/BYekan.ttf') format('truetype'),
url('http://www.sepordegozar.ir/WebFonts/BYekan.svg') format('svg');
font-weight: normal;
font-style: normal;

}
.my_font1{
font-family: 'BYekan';
font-size:28px;
}

[afshin9032]

local رو اضافه کن ، به احتمال زیاد جواب میده :

کد با local :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@font-face {
font-family: Davat;
src: local(Davat),url('Font/BDavat.eot');
src: local(Davat),url('Font/BDavat.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BDavat.woff') format('woff'),
url('Font/BDavat.ttf') format("truetype"),
url('Font/BDavat.svg') format('svg');
}
@font-face {
font-family: BHoma;
src: local(BHoma),url('Font/BHoma.eot');
src: local(BHoma),url('Font/BHoma.eot?#iefix') format('embedded-opentype'), /* IE +8 */
url('Font/BHoma.woff') format('woff'),
url('Font/BHoma.ttf') format("truetype"),
url('Font/BHoma.svg') format('svg');
}
.my_font1{
font-family:Davat;
font-style:normal;
font-size:28px;
}
.my_font2{
font-family: BHoma;
font-style: normal;
font-size:28px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body> <p class="my_font1"> به نام خداوند بخشنده مهربان </p> <p class="my_font2">به نام خداوند بخشنده مهربان </p> <p>به نام خداوند بخشنده مهربان</p> </body></html>

[کامروا]

local رو اضافه کن ، به احتمال زیاد جواب میده

سلام دوست من:قلب:

Local ، اگر فونت روی سیستم کاربر باشه رو لود میکنه اگرم نباشه از URL میخونه.
پس اگر مشکل دوستمون با قرار دادن Local هم حل بشه، فقط واسه این هستش که این فونت روی سیستم خودش نصبه.