مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش بحث تنظیمات فونت متن عناصر html در css ، بپردازیم. زبان html امکاناتی کلی جهت مدیریت تنظیمات فونت متن عناصر html، در اختیار کاربران قرار می دهد. اما در css، امکاناتی گسترده تر و پیشرفته تری برای تنظیمات فونت متن عناصر html در css ، در اختیار کاربران قرار می دهد.
برای زیبایی و جذابیت بیشتر در قالب صفحات وب آموزشهایی درباره موضوعات کار با فضای بین عناصر html در css ، مدیریت فضای خالی داخل عناصر html در css و تنظیمات عرض و ارتفاع عناصر html در css در این سایت ارائه گردیده است.
در ادامه این پست آموزشی به آموزش چگونگی تعریف تنظیمات فونت متن عناصر html در css ، می پردازیم.
text-css
تنظیمات فونت متن عناصر html در css
تنظیمات فونت در css شامل ویژگی های font family, boldness, size و style برای فونت متن می شود.
ویژگی font family
روشن است که ویژگی font-family طرح فونت را مشخص می کند. در css می توانید با این ویژگی و با استفاده از فونت های نصب شده در سیستم طرح فونت را تعیین کنید.
مثال:
ویژگی font-style
با ویژگی font-style می توانید style متن را مشخص کنید، که اغلب برای italic کردن متن استفاده می شود.
مقادیر ویژگی font-style :
- normal : متن بصورت عادی نمایش داده می شود.
- italic : متن بصورت italic نمایش داده می شود.
- oblique : این مقدار بسیار شبیه به italic است اما کمتر پشتیبانی می شود.
مثال:
مثال : ویژگی font-style
| p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } |
تنظیمات اندازه فونت در css
با استفاده از ویژگی font-size می توان اندازه فونت را تعیین کرد.توانایی مدیریت اندازه متن در طراحی وب مهم است. توجه کنید که شما باید تنظیمات اندازه فونت را طوری انجام دهید تا پاراگرافها مانند عنوان ها و یا عنوانها مانند پاراگرافها باشند. اندازه متن در css می تواند بصورت ایستا یا پویا تعریف شود. اگر بصورت ایستا تعریف شود اندازه متن ثابت است و تغییر نمی کند مگر بصورت دستی آن را تغییر دهید. اما در حالت پویا اندازه متن عنصر html نسبت به اندازه متن عنصر والد آن تغییر می کند. یعنی اگر اندازه فونت عنصر والد را تغییر دهید ، اندازه عناصر زیر مجموعه هم به همان نسبت تغییر می کند.
مثال: تنظیم اندازه متن بر حسب پیکسل (سعی کنید اندازه متن ر ابر حسب پیکسل تعریف کنید تا کنترل کاملی بر اندازه متن داشته باشید).
مثال : اندازه ی فونت
| h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; } |
تنظیم اندازه متن بر حسب واحد em
اگر font-size عنصری را بر حسب em تعریف کنید. در این حالت font-size آن عنصر بر اساس font-size عنصر والد آن که بر حسب پیکسل تعریف شده، تعیین می شود.
اگر font-size عنصر ۱em تعیین شود. در این حالت اندازه فونت آن با اندازه فونت عنصر والد برابر خواهد بود. و اگر font-size هیچ عنصر والدی برحسب پیکسل نباشد. اندازه ی font-size عنصر html که بر حسب em تعریف شده از اندازه font-size مرورگر وب تعیین می شود.
مثال:
مثال : تنظیم اندازه ی فونت با واحد em
| h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ } |
تعیین اندازه بر حسب درصد و em
یک راه حل که در تمام مرورگر ها عمل می کند، تعیین font-size تگ <body> بر حسب در صد و سایر عناصر بر حسب em است.
مثال:
مثال : تنظیم اندازه ی فونت برحسب درصد و em
| body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; } |
ضخامت متن
ویژگی font-weight ضخامت متن عناصر html را در css تعیین می کند.
مثال:
تعیین اندازه فونت بر اساس اندازه پنجره مرورگر
اگر اندازه font-size بر حسب vw تعریف شود. آنگاه اندازه فونت متن عنصر html با اندازه پنجره مرورگر برابر می شود.
مثال:
ویژگی font-variant
اگر ویژگی font-variant با مقدار small-caps تعریف شود. تمام حروف متن عنصر html به حروف بزرگ تبدیل می شود اما اندازه این حروف بزرگ شده از اندازه حروف بزرگ عناصر html دیگر، کوچکتر خواهد بود.
مثال:
مثال : ویژگی font-variant
| p.normal { font-variant: normal; } p.small { font-variant: small-caps; } |
تمام خصوصیات font در CSS
| خصوصیت | توضیحات |
|---|
| font | تمام خصوصیات فونت را در یک کد مختصر تعریف می کند. |
| font-family | font family متن را مشخص می کند. |
| font-size | font size متن را مشخص می کند. |
| font-style | font-style متن را مشخص می کند. |
| font-variant | ویژگی font-variant را در یک متن مشخص می کند. |
| font-weight | ضخامت متن را مشخص می کند. |
کلام آخر
همانطورکه در در بخش قبلی نیز اشاره شد متن ها و نوشته ها از اصلی ترین بخش محتوا در هر وب سایت محسوب می شود، که برای تنظیم صحیح و درست آن در محتوا باید با تنظیمات فونت متن عناصر html در css طبق مباحث فوق آشنایی داشته باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
mohsen11astane
مرسی داش گل
در مورد فونت سایت میشه لطف کنید بگید از چه نوع فونت فارسی استفاده کردید و اینکه این فونت رو برای body و برای عناصر دیگه صفحه به چه صورت تعریف کردید؟ آیا از em و px مثلا استفاده کردید؟ از em و %؟ دمتون گرم
پی وی لرن
از فونت ایران سنس استفاده شده و نسخه اورجینال هستش که می توانید از سایت فونت ایران خریداری نمایید و یا از نسخه رایگان مشابه آن byekan برای شروع کار استفاده کنید.
نحوه فراخوانی در body و عناصر دیگر به این شکل می باشد
;’font-family: ‘IRANSans
;’font: 600 12px/26px ‘IRANSans
بیشتر به px استفاده شده اند.
mohsen11astane
مرسی