آموزش قلم های وب CSS

13 جولای 2021

قانون CSS @ font-face

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

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

قلم های “خود” شما در @font-faceقانون CSS تعریف می شوند .


قالب های مختلف قلم

قلم های TrueType (TTF)

TrueType یک استاندارد قلم است که در اواخر دهه 1980 توسط اپل و مایکروسافت ساخته شده است. TrueType رایج ترین قالب قلم برای سیستم عامل Mac و سیستم عامل Microsoft Windows است.

قلم های OpenType (OTF)

OpenType قالبی برای قلم های مقیاس پذیر کامپیوتر است. این بنا بر روی TrueType ساخته شده است و علامت تجاری ثبت شده مایکروسافت است. از قلمهای OpenType امروزه معمولاً در سیستم عاملهای اصلی رایانه استفاده می شود.

قالب قلم باز وب (WOFF)

WOFF یک قالب قلم برای استفاده در صفحات وب است. این در سال 2009 ساخته شده است ، و در حال حاضر یک توصیه W3C است. WOFF اساساً OpenType یا TrueType با فشرده سازی و فراداده اضافی است. هدف پشتیبانی از توزیع قلم از سرور به مشتری از طریق شبکه ای با محدودیت پهنای باند است.

قالب قلم باز وب (WOFF 2.0)

قلم TrueType / OpenType که فشرده سازی بهتری را نسبت به WOFF 1.0 فراهم می کند.

قلم ها / اشکال SVG

قلم های SVG اجازه می دهد تا SVG هنگام نمایش متن به عنوان حروف کوچک استفاده شود. مشخصات SVG 1.1 یک ماژول قلم را تعریف می کند که امکان ایجاد قلم در یک سند SVG را فراهم می کند. همچنین می توانید CSS را در اسناد SVG اعمال کنید و قانون @ font-face را می توانید در متن اسناد SVG اعمال کنید.

قلم های OpenType جاسازی شده (EOT)

قلم های EOT شکلی فشرده از قلم های OpenType است که توسط مایکروسافت برای استفاده به عنوان قلم های جاسازی شده در صفحات وب طراحی شده است.


پشتیبانی مرورگر برای قالب های قلم

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

* اینترنت اکسپلورر: قالب قلم فقط وقتی تنظیم می شود که “قابل نصب” باشد.


با استفاده از قلم مورد نظر خود

در @font-faceقاعده؛ ابتدا یک نام برای قلم تعریف کنید (به عنوان مثال myFirstFont) و سپس به فایل قلم اشاره کنید.

نکته: همیشه برای URL قلم از حروف کوچک استفاده کنید. حروف بزرگ می توانند نتایج غیرمنتظره ای در اینترنت اکسپلورر ایجاد کنند.

برای استفاده از قلم برای یک عنصر HTML ، از طریق font-familyویژگی به نام قلم (myFirstFont) مراجعه کنید :

مثال

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

با استفاده از متن پررنگ

شما باید یک @font-faceقانون دیگر حاوی توصیف کننده برای متن پررنگ اضافه کنید:

مثال

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

پرونده “sansation_bold.woff” پرونده قلم دیگری است که حاوی نویسه های درشت برای قلم Sansation است.

هر زمان که بخشی از متن با فونت-خانواده “myFirstFont” نشان داده شود ، مرورگرها از این مورد استفاده می کنند.

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


توصیفگرهای قلم CSS

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.