آموزش ویژگی font در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی font در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی font در CSS
با استفاده از ویژگی font میتوان ویژگی های زیر که همگی مربوط به فونت ها در یک صفحه وب می باشد، را بصورت خلاصه نوشت :
- font-style
- font-variant
- font-weight
- font-stretch
- font-size / line-height
- font-family
استفاده از ویژگی های font-size و font-family ضروری می باشد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی font را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از فقط font-size و font-family ( استفاده از این ۲ تا ضروری می باشد و بقیش اختیاری )
|
1 2 3 4 5 6 7 |
<style> p{ font: 18px tahoma, arial, sans-serif; } </style> |
مثال شماره ۲ : استفاده از font-style , font-variant , font-weight , font-size / line-height , font-family
|
1 2 3 4 5 6 7 |
<style> p{ font: italic small-caps bold 18px/50px tahoma, arial, sans-serif; } </style> |
مثال شماره ۳ : استفاده از مقدار message-box ( فونت های سیستمی )
|
1 2 3 4 5 6 7 |
<style> p{ font:message-box; } </style> |
Free-Learn
جدول مشخصات ویژگی font در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | به جدول مقادیر نگاهی بندازید |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.font=”italic small-caps bold 10px/10px tahoma”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی font در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| 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 | میزان کشش / پَهنی یا باریکی فونت را مشخص میکند. ( در CSS3 اضافه شده ) |
| font-size/line-height | بخش اول اندازه فونت را مشخص میکند و بخش دوم میزان فاصله بین سطرهای متن ( مقدار پیشفرض normal ) |
| font-family | نام فامیلی / خانوادگی فونت را مشخص میکند. ( مقدار پیشفرض به خوده مرورگرها بستگی دارد ) |
| caption | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| icon | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| menu | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| message-box | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| small-caption | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| status-bar | استفاده از فونت های سیستمی ( سیستم عامل ها ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
ویژگی font-stretch یک ویژگی اضافه شده در CSS3 می باشد، ولی با اینحال هنوز در مرورگرهای گوگل کروم ، Opera و سافاری پشتیبانی نمی شود.
