صفحه اصلی / اموزش برنامه نویسی / اموزش اضافه کردن فونت به سایت در CSS،اموزش font-face

اموزش اضافه کردن فونت به سایت در CSS،اموزش font-face

اموزش اضافه کردن فونت به سایت در CSS،اموزش font-face

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی – اموزش CSS با موضوع اموزش اضافه کردن فونت به سایت در CSS،اموزش font-face همراه شما هستید در پایان این اموزش شما یاد خواهید گرفت چگونه فونت های خارجی و زیباتر را به وب سایت خود اضافه کنید.

 

@font-face 

همواره یکی از راه های افزایش و بهبود رابط کاربری وب سایت استفاده از فونت مناسب در نوشته های سایت می باشد چرا که انچه کاربر را با خود مستقیما درگیر میکند متن و نوشته سایت می باشد و درنتیجه کیفیت انها هست که کاربران جذب میکند.

بنابراین بسیاری از طراحان وب به دنبال اجرا فونت های زیباتر در وبسایت خود هستند برای اینکار شما باید طریقه استفاده از قانون فونت فیس یا Font-face بلد باشید تا فونت هایی که برروی سیستم کاربر نصب نیستند را بتوانید در سیستم انها نمایش دهید.

 

انواع فرمت های فونت و پشتیبانی مرورگرها از انها :

برای انکه بتوانید بهتر این مبحث را درک کنید بهتر است انواع فرمت های فونت و وضعیت پشتیبانی مرورگرها از انها را بدانید.

لیست انواع فرمت های فونت ها:

  1. TrueType Fonts (TTF)
  2. OpenType Fonts (OTF)
  3. The Web Open Font Format (WOFF)
  4. The Web Open Font Format (WOFF 2.0)
  5. SVG Fonts/Shapes
  6. Embedded OpenType Fonts (EOT)

وضعیت پشتیبانی از انها در مرورگر ها:

اموزش اضافه کردن فونت به سایت در CSS،اموزش font-face

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

 

اموزش استفاده از font-face در css :

برای این کار یک سند css ایجاد کنید و سپس انرا به سند html خود متصل کنید.

سپس پکیج فونت مورد نظر (پکیج فونت شامل مجموعه فرمت های مختلف از یک فونت برای اجرا در تمامی مرورگر ها می باشد) در یک فولدر به نام fonts یا هر نام دلخواهی در پوشه سایت قرار دهید.

اکنون می بایست font-face را تعریق کنید برای این کار از کد های زیر استفاده می کنیم.

در کد بالا برای مجموعه فونت های خود یک نام (myfonts) تعریف کردیم سپس ادرس فایل هریک به همراه نوع ان را وارد کردیم.

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

کلاس بالا را به هر عنصر یا element که بدهید ابتدا فونت هایی که به نام myfonts تعریف کردیم را به عنصر می دهد حال اگر فونت مورد نظر برروی مرورگر اجرا نشد سراغ بقیه فونت ها میرود.

 

اموزش اضافه کردن فونت به سایت در CSS،اموزش font-face امیدواریم از این اموزش بهره کافی برده باشید سوالات و نظرات خود را در قسمت دیدگاه می توانید برای ما ارسال کنید.

 

پاسخ دهید

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