آموزش ویژگی font در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی font در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی font در CSS
با استفاده از ویژگی font
میتوان ویژگی های زیر که همگی مربوط به فونت ها در یک صفحه وب می باشد، را بصورت خلاصه نوشت :
- font-style
- font-variant
- font-weight
- font-stretch
- font-size / line-height
- 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 و سافاری پشتیبانی نمی شود.