CSS, CSS

چگونه : فونت دلخواه ام را با Font-Face به صفحه وب اضافه کنم ؟

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

اعمال فونت های دلخواه به صفحه یکی از جذاب ترین قابلیت های CSS3 برای طراحان وب بوده و هست . با استفاده از مشخصه font-face هست که شما می توانید هر فونت دلخواهی رو به صفحه وب تون اضافه کنید بدون اینکه  مهم باشه آیا این فونت روی سیستم کاربر نیز نصب هست یا نه .

 

مانند بسیاری از تکنیک های CSS3 ، این کد نیز در ابتدا کاربرد ساده ای دارد ولی در عمل و مباحث پیشرفته تر کمی کدها پیچیده می شوند.

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

 

آپلود فونت

ابتدا فایل های فونت مورد نظرتان را روی وب آپلود کنید .البته بهتر است همه آنها در یک پوشه بنام Fonts باشند ولی اختیاری است.

فراموش نکنید انواع مختلف یک فونت را آپلود کنید مثلا کلفت (Bold) و کج (Italic) . (معمولا فونت های ویندوز رو می تونید در مسیر c:\windows\fonts پیدا کنید)

معمولا از نوع فونت EOT یا (Embedded OpenType) برای مرورگر اینترنت اکسپلورر و از دو نوع دیگر OTF  یا (OpenType)  و  TTF یا (TrueType) برای مرورگرهای دیگر استفاده می شود .(البته می توانید فونت هایی از نوع WOFFیا  (Web Open Font Format) و SVG یا  (Scalable Vector Graphics) را نیز بکار ببرید ولی ما در اینجا از انواع عمومی تر فونت های که در بالا آمد استفاده می کنیم)

محل ذخیره فونت های روی سرور نیز به خاطر بسپارید تا بریم سراغ ادامه کار …

افزودن بخش font-face به فایل CSS مان

فایل css یا html مورد نظرتون رو باز کنید و کد font-face مثل زیر رو بهش اضافه کنید

در داخل بخش font-face ابتدا یک نام به فونت اختصاص بدهید تا بعدا با فراخوانی آن بتوانیم فونت را به عناصر صفحه اعمال کنیم (این اسم اختیاری است و حتما لازم نیست اسم فونت باشد ولی بهتر است با معنی و خوانا باشد)

حالا نوبت یه اضافه کردن مسیر فراخوانی فایل EOT می رسد

دقت کنید که مسیر و نام فایل در اینجا خیلی مهم است . خوب حالا می خواهیم فایل های OTF و/یا TTF را اضافه کنیم

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

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

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

 

اعمال فونت به عناصر صفحه

و حالا می توانید فونت دلخواه تون رو به عناصر مختلف صفحه اعمال کنید.برای این کار کافیه سم فونت رو قبل زا همه اعمال کنید

 

استفاده از اشکال مختلف یک فونت

برای مثال اگر می خواهید از نسخه bold فونت نیز استفاده کنید کافیه یک بخش font-face دیگه به سبک تون اضافه کنید و مثل بالا ، مسیر و نام فایل فونت bold رو به اون بدید و در انتها کد “font-weight:bold” رو اضافه کنید. پس کد نهایی به این شکل خواهد بود

 

همین !

شما از چه روشی استفاده می کنید؟از cufon جی کوئری یا typekit ادوبی ، شاید هم google web fonts? لطفا روش خودتون و نظرات تون رو پاین همین صفحه بگین تا با هم یاد بگیریم …

منبع

 

18 Comments

  1. سلام خسته نباشید. من از استایل bootstrap استفاده میکنم . چون نخواستم کدهای اون رو به هم بزنم یه فایل استایل درست کردم . کدی که شما گفتین رو تو اون اعمال کردم . اما متاسفانه هرکاری میکنم نشون نمیده . حتی فایل css بوت استرپ رو حذف کردم و فقط فایل استایل موند اما باز هم جواب نداد . مشکل از کجا میتونه باشه .

  2. درودبر شما من از فونت فیس استفاده کردم ولی نمیشه
    باید عرض کنم که یه سایت خارجیه ولی فونت منو نمی خونه چیکار کنم لطفا کمک کنید

  3. سلام
    من توی سایت وردپرسی دو تا فونت به قالب اضافه کردم ولی اون فونت ها فقط توی سیستمهای نشون داده میشه که اون فونت ها رو نصب کردن. اگه با یک کامپیوتری که اون فونتها رو نداره سایت رو باز کنیم یک فونت دیگه نمایش میده.
    خیلی سر این مساله گیر کردم لطفا راهنمایی کنید.

  4. سلام
    من توی سایت وردپرسی دو تا فونت به قالبم اضافه کردم ولی اون فونت ها فقط توی سیستمهای نشون داده میشه که اون فونت ها رو نصب کردن. اگه با یک کامپیوتری که اون فونتها رو نداره سایت رو باز کنیم یک فونت دیگه نمایش میده.
    خیلی سر این مساله گیر کردم لطفا راهنمایی کنید

  5. سلام دوست عزیز، ما هم از همین روش استفاده میکنیم، نظر خواصی ندارم فقط لطف کن این لود مجدد صفحه رو غیر فعال کن بد جوری اذیت میکنه مثلا من برای نوشتن این نظر مجبور شدم دوباره نظرمو بنویسم!
    موفق باشید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *