این آموزش در تاریخ ۱۴۰۰/۱۱/۰۲ آپدیت شده است.
آموزش ویژگی font در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی font در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی font در CSS
با استفاده از ویژگی font در CSS میتوان ویژگی های زیر را که همگی مربوط به فونت ها در یک صفحه وب می باشد، بصورت خلاصه نوشت :
اگه از هیچکدوم از ویژگی ها استفاده نکنید ،استفاده از ویژگی های font-size و font-family ضروری می باشد، یعنی میتونیم فقط font-size و font-family رو تنظیم کنیم و کاری به بقیش نداشته باشیم
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی font را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از فقط font-size و font-family ( استفاده از این ۲ تا ضروری می باشد و بقیش اختیاری )
|
1 2 3 4 |
body{ font: 14px tahoma; text-align: center; } |
مثال شماره ۲ : استفاده از ویژگی های :
- font-style
- font-variant
- font-weight
- font-stretch
- font-size / line-height
- font-family
|
1 2 3 4 |
body{ font: italic small-caps bold extra-expanded 20px/10px tahoma; text-align: center; } |
Free-Learn
جدول مشخصات ویژگی font در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | به جدول مقادیر نگاهی بندازید |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.font=”12px tahoma”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی font در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| font | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
font: font-style font-variant font-weight font-stretch font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی font در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| font-style | سبک / استایل فونت را مشخص میکند ( پیشفرض normal ) |
| font-variant | حروف کوچک را به حروف بزرگ تبدیل میکند و این حروف تبدیل شده کمی کوچکتر از حروف بزرگ موجود در متن نمایش داده میشوند ( پیشفرض normal ) |
| font-weight | وزن فونت را مشخص میکند ( پیشفرض normal ) |
| font-stretch | میزان کِش آوردن فونت را مشخص میکند ( پیشفرض normal ) |
| font-size / line-height | بخش اول اندازه فونت را مشخص میکند و بخش دوم میزان فاصله بین سطرهای متن ( مقدار پیشفرض normal ) |
| font-family | نام فامیلی / خانوادگی فونت را مشخص میکند ( مقدار پیشفرض به خوده مرورگرها بستگی دارد ) |
| caption | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| icon | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| menu | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| message-box | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| small-caption | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| status-bar | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- ویژگی font-stretch میتونه میزان کِش آوردن ( یا پهن شدن ) فونت رو مشخص کنه، ولی خب این ویژگی همینجوری عشقی روی هر فونتی عمل نمیکنه، چون باید خوده فونت این قابلیت ( پهن شدن ) رو داشته باشه.
