رفتن به مطلب

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


پست های پیشنهاد شده

سلام دوستان

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


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

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


'PT Sans Narrow'

لینک به ارسال

تو 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' هم دقیقاْ همین مراحل رو طی کرده و اومده استفاده کرده و بعد از اون , گذاشته و اسم باقی فونتاشو گفته

موفق باشی :)

لینک به ارسال

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

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

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

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

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

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

لینک به ارسال

تو 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' هم دقیقاْ همین مراحل رو طی کرده و اومده استفاده کرده و بعد از اون , گذاشته و اسم باقی فونتاشو گفته

موفق باشی :)

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

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

لینک به ارسال
ممنونم
 '../fonts/ubuntu.eot?# 

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

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

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

لینک به ارسال

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

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

لینک به ارسال

به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع ...

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

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...