کار با ویژگی های font و text در css

[saberi]

کار با ویژگی های font و text در css

پیش از این در بخش آموزش مقدماتی css، از کاربرد این زبان، نحوه تعریف و استفاده از کلاس (class) و آی دی (id) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Backgrounds) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه، مرور کردیم، اکنون در ادامه بحث آموزش های مقدماتی css می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و آن کار با فونت و متن و بررسی تنظیمات آنها است.

کار با فونت (Font) در css:

همانطور که قبلا گفتیم، css به عنوان ابزاری کمکی در شکل دهی ظاهر محتوای صفحاوت وب (html) کابرد دارد، به عبارتی از آن برای ایجاد استایل های مورد نظر برای عناصر صفحات وب که می تواند به فرض فونت مطالب باشد، استفاده می شود.
تنظیم حروف چپ به راست یا راست به چپ با direction:

در css برای نمایش حروف راست به چپ (مثل زبان فارسی)، از عنصر direction استفاده می کنند.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد.
تعریف فونت در :css

در css فونت را در حالت کلی به شیوه های زیر تعریف می کنند.

تعریف مستقیم فونت:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تعریف خانواده فونت:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

خانواده یک فونت می توانید برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (مناسب برای حروف فارسی)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول بود، دیگر از فونت های بعدی استفاده نمی شود، ولی اگر فونت اول وجود نداشت، نوبت به استفاده از فونت های بعدی می رسد، ذکر یک نکته ضروری است: استفاده از فونتهایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مثل برخی از فونت های فارسی)، ممکن است موجب شود که کاربران صفحه شما، به همان شکلی که شما آن را می بینید، نتوانند مطالب را ببینند (به این دلیل که آن فونت خاص در سیستم آنها نصب نیست، لذا با نوع دیگری جایگزین می شود).

اندازه فونت یا font-size:

اندازه فونت ها در css با مقادیر px، em یا به صورت عبارات مشخص می شوند.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

علاوه بر مقادیر پیکسلی می توان از em و یا عبارت تعریف شده در css استفاده کرد (البته توصیه می کنیم فقط از px استفاده کنید، چرا که استانداردتر است و در تمام مرورگرها به یک شکل پردازش می شود)؛ عباراتی که برای اندازه فونت به کار می روند عبارتند از:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
مقادیر پیکسلی به طور استاندارد از 9، 10، 12 شروع و به 36 ختم می شوند، مقادیر em از حاصل تقسیم مقادیر پیکسلی بر عدد 16 (16 اندازه پیش فرض فونت در مرورگر است) به دست می آید، مثلا 30px مساوی است با 1.875em، در مثال زیر از em استفاده شده است.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

کشیدگی (stretch) فونت:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

stretch یا کشیدگی فونت بیشتر در مورد حروف لاتین کاربرد دارد، با این حال مقادیر زیر را می توان برای stretch در نظر گرفت.
- condensed (فشرده)
- expanded (بسیط)
- extra-condensed (خیلی فشرده)
- extra-expanded (خیلی بسیط)
- narrower (باریک)
- normal (عادی)
- semi-condensed (تقریبا فشرده یا نیمه فشرده)
- ultra-condensed (خیلی خیلی فشرده)
- ultra-expanded (خیلی خیلی بسیط)
- wider (عریض)

استایل فونت یا font-style:

از استایل فونت می توان برای ایجاد متون کج شده یا مایل استفاده کرد.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مقادیر استایل فونت:
- oblique (مایل)
- italic (کج)
- normal (عادی)

ضخامت فونت یا font-weight:

در css برای برجسته کردن یک فونت، می توان این کار را با خاصیت font-weight انجام داد، font-weight و font-style در css تقریبا عملکردی شبیه تگ های b، strong، em و i در html دارند.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

برای ضخامت فونت می توانیم از مقادیر زیر استفاده کنیم.

- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در css3 برای فونت وجود دارد که یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد، از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به فونت، در مثال زیر ما یک کلاس فرضی تعریف کرده ایم و متن موجود در آن را با عناصر فونت تنظیم نموده ایم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تنظیمات متن (text) در css:

تعریف نوع فونت و ویژگی های آن، گام اول برای نمایش محتوا در css است، در قدم بعدی نیاز به تنظیم چینش مطالب و نحوه نمایش آنها است، این ویژ گی ها با text و زیرمجموعه های آن ایجاد می شوند.
تنظیم تراز و چینش متن با text-align:

برای اینکه متن خود را به صورت راست چین یا چپ چین و... تنظیم کنید، باید از text-align و یکی از مقادیر زیر استفاده نمائید.
- center (تنظیم گوشه های متن در وسط)
- justify (تمام چین کردن متن، پوشش از سمت چپ و راست)
- left (چپ چین کردن متن)
- right (راست چین کردن متن)
مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تزئین متن با text-decoration:

در css متن (و مخصوصا لینک) را با text-decoration تنظیم می کنند، مثلا اگر از این گزینه استفاده نکنید، بیشتر مرورگرها، لینک ها را به صورت متن زیرخط دار نشان می دهند.
مقادیری که در text-decoration استفاده می شود:
- blink (متن چشمکزن)
- line-through (متنی که خطی از داخلش گذشته یا بر روی آن خط کشیده شده)
- none (بدون موارد اضافه و حالت عادی)
- overline (متن با خطی روی آن)
- underline (متن زیر خط دار)
مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

میزان فشردگی متن یا text-indent:

از این قابلیت بیشتر برای حروف انگلیسی (که بین آنها فاصله است) استفاده می شود و مقادیر آن را با پیکسل تعریف می کنند.
مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

ایجاد سایه متن یا text-shadow:

text-shadow قابلیتی است که در css3 افزوده شده است، از این عنصر برای ایجاد سایه متن استفاده می شود؛ روش ایجاد آن به طور کلی به صورت زیر است:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اعداد در عبارت بالا به ترتیب نشانه فاصله افقی (horizontal shadow)، فاصله عمودی (vertical shadow)، فاصله ماتی (blur) و رنگ سایه است.
نکته: این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

نمایش کوچک بزرگی حروف با text-transform:

text-transform قابلتی است در css که بیشتر برای حروف انگلیسی کاربرد دارد، چرا که می توان با آن حروف را بزرگ یا کوچک نشان داد، مقادیر text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در خاتمه این بحث، توجه شما را به مثالی آنلاین جلب می کنیم که در آن، متنی فرضی را با عناصر تنظیم کننده، شکل داده ایم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *