این آموزش در تاریخ ۱۴۰۰/۱۱/۰۲ آپدیت شده است.
آموزش ویژگی font-feature-settings در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی font-feature-settings در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی font-feature-settings در CSS
با استفاده از ویژگی font-feature-settings در CSS میتوان یکسری تنظیمات پیشرفته تایپوگرافی رو بروی فونت های از نوع OpenType ایجاد و یا کنترل کرد.
هر یک از این تنظیمات پیشرفته را میتوان با استفاده از ۲ کلمه کلیدی ( عدد ۱ ) و یا کلمه ( on ) بروی فونت مورد نظر اعمال / روشن کرد، و برای خاموش / غیرفعال کردن از off یا ۰ استفاده می شود.
این تنظیمات پیشرفته میتواند تغییرات اساسی در شکل و استایل فونت، نحوه چیدمان حروف ، نحوه پیوند خوردن حروف و.. ایجاد نماید.
این ویژگی بروی هرفونتی عمل نمیکنه و از طرفی خیلی خیلی کم و تاحدودی اصلا ازش استفاده نمیشه.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی font-feature-settings را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.t1 { font-feature-settings: "smcp"; } یا .t1 { font-feature-settings: "swsh" off; } .t2 { font-feature-settings: "smcp", "swsh" on; } یا .t2 { font-feature-settings: "smcp" off, "swsh" off; } |
Free-Learn
جدول مشخصات ویژگی font-feature-settings در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | normal |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.fontFeatureSettings=”smcp”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی font-feature-settings در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- و -moz- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| font-feature-settings | ۴۸ ۲۱ تا ۴۷ -webkit- |
۳۴ ۱۵ تا ۳۳ -moz- |
۳۵ ۱۵ تا ۳۴ -webkit- |
۹٫۱ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
font-feature-settings: normal|KeyWords; |
Free-Learn
جدول مقادیر ویژگی font-feature-settings در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| normal | مقدار پیش فرض – از تنظیمات پیشفرض استفاده میکند |
| liga | ویژگی standard ligatures |
| onum | ویژگی old style figures |
| zero | ویژگی slashed zero |
| sups | ویژگی superscript |
| subs | ویژگی subscript |
| smcp | ویژگی small caps |
| case | ویژگی case-sensitive forms |
| swsh | ویژگی swashes |
| medi | ویژگی medial forms |
Free-Learn
نکات و توضیحات
- حالت های مختلف برای استفاده از این ویژگی بصورت زیر می باشد :
|
1 2 3 4 |
font-feature-settings: "smcp"; /* تک ویژگی */ font-feature-settings: "smcp" on; /* تک ویژگی با مقدار */ font-feature-settings: "swsh" 2; /* تک ویژگی با مقدار عددی */ font-feature-settings: "smcp", "swsh" 2; /* دو ویژگی با مقدار عددی */ |
- هر یک از این تنظیمات / ویژگی های پیشرفته ،بروی هر فونتی قابل اجرا یا اعمال شدن نیست، فقط یسری فونت خاص هستن که از این قابلیت ها پشتیبانی میکنه، و بروی فونت های معمولی عمل نمیکنه.
- برای اضافه کردن چندین ویژگی یا تنظیمات باید هر یک از تنظیمات را با کاما , از همدیگر جدا کرد. مثال :
|
1 |
font-feature-settings:"smcp" 1, "swsh" 1; |
- برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر کروم و سافاری و اُپرا
- -moz- برای مرورگر موزیلا فایرفاکس
