آموزش Attachکردن فونت به پروژه برای طراحی‌سایت فروشگاهی دیجی کالا (Digikala )
288 بار بازدید -
3 سال پیش
-
آموزش نحوه اضافه کردن فونت
آموزش نحوه اضافه کردن فونت دلخواه در سایت
تعریف وب فونت
خب دوستان ما در این جلسه ( نحوه اضافه کردن فونت دلخواه در سایت ) میخوایم یاد بگیریم که چجوری میشه یک یا چندین فونت دلخواه رو بروی سایت نصب کرد ( منظور از نصب در اینجا یعنی اضافه کردن چند خط کد CSS هستش )
پس بطور کلی به فونت هایی که در فضای وب و بروی سایت ها نصب و استفاده میشه بهش میگیم وب فونت یا به انگلیسی Web Font ، همین تموم شد رفت.
هر فونتی که با فرمت TTF داشته باشید خیلی راحت میشه بروی سایت نصبش کرد و اصلا اینجوری نیست که فکر کنید فقط یسری فونت های خاص هستند برای اینکار. ( کلا هرفونتی داشته باشید میشه روی سایت نصبش کرد )
فرمت های مختلف یک فونت وب
ما برای اینکه بتونیم از یک فونت دلخواه بروی سایتمون استفاده کنیم باید از فونت مورد نظرمون چندین فرمت مختلف داشته باشیم، که این فرمت ها به شرح زیر می باشند :
فرمت WOFF بیشترین سازگاری و پشتیبانی رو در مرورگرها داره. ( از هیچی فرمتی هم استفاده نکرده باشید باید حتما از این فرمت استفاده کنید )
فرمت EOT فقط بروی مرورگر اینترنت اکسپلورر یا IE پشتیبانی میشود
قبلا فرمت SVG هم بود ولی خب این فرمت کلا از رده خارج شده ( دیگه منم تو جدول نیاوردمش )
نوع فرمت توضیح
TTF مخفف TrueType Font
یک فرمت استاندارد که توسط مایکروسافت و اپل ایجاد شده
این فرمت بیشترین استفاده رو در
سیستم عامل های ویندوز ( مایکروسافت ) و مک ( اپل ) دارد
OTF مخفف OpenType Font
ساخته شده از فرمت TTF و متعلق به مایکروسافت
WOFF مخفف Web Open Font Format
از ترکیب ۲ فرمت TTF و OTF بصورت فشرده درست شده
WOFF2 همون WOFF هست فقط با فشرده سازی بیشتر
EOT مخفف Embedded OpenType
شکل کامل و جمع وجور شده فرمت OTF می باشد
استفاده از دستور Font-Face@ برای تعریف فونت ها
خب ما الان از فونت موردنظرمون فرمت های مورد نیاز رو بدست آوردیم، الان فقط مونده تعریف و آدرس دهی فونت ها با استفاده از ویژگی Font-Face@
پس علی یارتون همه فونت هارو بزارید داخل یک پوشه بعد اون پوشه رو بزارید کنار صفحه وبتون ( صفحه HTML ) و در ادامه میریم برای آدرس دهی فونت ها
مرحله اول » تعریف یک نام دلخواه برای فونت و آدرس دهی فرمت های مختلف فونت
باید برای فونت مون یک نام خانوادگی ایجاد کنیم که از این به بعد هرکجای سایتمون خواستیم ازش استفاده کنیم کافیه از همون نام استفاده کنیم. به همین راحتی !
همچنین باید مسیر فایل های فونت رو که فرمت های مختلفی براش ایجاد کردم رو بطور دقیق آدرس دهی کنیم که بتونیم در واقع فونت مون رو داخل CSS فراخوانی کنیم.
دانلود از وبسایتwww.heilton.com
3 سال پیش
در تاریخ 1400/10/14 منتشر شده
است.
288
بـار بازدید شده