توضیح در مورد این خاصیت css

[mahdi.a 432]

سلام دوستان

میخواستم ببینم توی این تیکه کد css

font-family: 'PT Sans Narrow',sans-serif;

این تیکه یعنی چی ؟

'PT Sans Narrow'

[arman100000 1264]

اسم فونته ديگه !

[nikanwp 629]

تو css ما قابلیتی داریم به نام @font-face .

حالا کاربردش :

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

برای همچین کاری هم تو css میایم قبل از همه کد ها به این شکل معرفی میکنیم :

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

}

اینجا اسم فونت ما ubuntu هست و به صورت پیش فرض نصب نیست روی کامپیوتر .

حالا باید این فونتمون رو به سه فرمت eot و woff و ttf تبدیل کنیم و به صورت بالا کد رو بزاریم تو پوستمون تو فولدر یا هر جای دیگه که دوست داشتیم .

بعد هر جا خواستیم توی هر کلاس یا آیدی از اون فونت استفاده کنیم باید از font-family به شکل زیر استفاده کنیم :‌

font-family: 'ubuntu', sans-serif;

اون 'PT Sans Narrow' هم دقیقاْ همین مراحل رو طی کرده و اومده استفاده کرده و بعد از اون , گذاشته و اسم باقی فونتاشو گفته

موفق باشی

[حمیدرضا 180]

خیلی عالی توضیح دادید.

این قسمت رو ممنون میشم باز کنید.

حالا باید این فونتمون رو به سه فرمت eot و woff و ttf تبدیل کنیم و به صورت بالا کد رو بزاریم تو پوستمون تو فولدر یا هر جای دیگه که دوست داشتیم .

[nikanwp 629]

حمید جان eot و woff و ttf در اصل فرمت فونت هست و معمولاْ فونتی که شما داری فرمتش ttf است اما برای اینکه تو مروگر جواب بده باید از همون فونت 2 تا فرمت دیگشم داشته باشی یعنی eot و woff .

حالا اگر هر سه فرمت اون فونتت رو داشتی که هیچی , طبق کدی که بهت دادم کپی میکنی میریزی تو یک پوشه به نام fonts سپس فقط اسم فونت رو با ubuntu عوض میکنی .

اگر هم فرمتاشو نداشتی گوگل سرچ میکنی convert font یا convert font ttf to woff سایت هایی هستن که به طور آنلاین تبدیل میکنن .

[حمیدرضا 180]

ممنونم

'../fonts/ubuntu.eot?#

علامت سوال و # لازمه؟

[nikanwp 629]

آره طبق چیزی که دادم بزار

[mahdi.a 432]

تو css ما قابلیتی داریم به نام @font-face .

حالا کاربردش :

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

برای همچین کاری هم تو css میایم قبل از همه کد ها به این شکل معرفی میکنیم :

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

}

اینجا اسم فونت ما ubuntu هست و به صورت پیش فرض نصب نیست روی کامپیوتر .

حالا باید این فونتمون رو به سه فرمت eot و woff و ttf تبدیل کنیم و به صورت بالا کد رو بزاریم تو پوستمون تو فولدر یا هر جای دیگه که دوست داشتیم .

بعد هر جا خواستیم توی هر کلاس یا آیدی از اون فونت استفاده کنیم باید از font-family به شکل زیر استفاده کنیم :‌

font-family: 'ubuntu', sans-serif;

اون 'PT Sans Narrow' هم دقیقاْ همین مراحل رو طی کرده و اومده استفاده کرده و بعد از اون , گذاشته و اسم باقی فونتاشو گفته

موفق باشی

خیلی لطف کردید ، اینو میدونستم که چه جوری باید فونت رو بارگزاری کنیم ، من فکر کردم این فونت نیست یه خاصیت ، چون اسمش زیاد شباهت به فونت نمیداد

و بازم از شما تشکر میکنم

[arman100000 1264]

ممنونم

 '../fonts/ubuntu.eot?# 

علامت سوال و # لازمه؟

آره طبق چیزی که دادم بزار

كنجكاو شدم بدونم چرا اين علامت سوال و # بايد آخرش باشه ؟

[nikanwp 629]

آرمان جان مرورگرهای جدید خط اول را نادیده می‌گیرند و خط جدید رو میخونند و این یک نوع هک هست برای گول زدن ie وقتی ?# رو من میزارم گول میخوره و خط اول رو میخونه فقط که با این کارم فقط فونت با فرمت eot رو دانلود میکنه .

شاید کم توضیح دادم ولی منظورو رسوندم بحث این سه خط کد و سه نوع فرمت برای مروگرهای مختلفه ...