ویژگی های Font و Text در CSS

تنظیم حروف چپ به راست و راست به چپ در CSS با direction

انتخاب جهت متن معمولا نخستین گام ما در طراحی صفحات وب است، در CSS برای نمایش حروف از سمت راست به چپ (به طور مثال برای زبان فارسی) یا چپ به راست (حالت پیش فرض) از ویژگی direction استفاده می کنیم.

<style>
body{
    direction:rtl;
}
</style>

خاصیت direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد، عبارت RTL مخفف Right To Left و عبارت LTR مخفف Left To Right است.

فونت (Font) در CSS

همانطور که قبلا گفتیم CSS به عنوان ابزاری کمکی در شکل دهی ظاهر صفحاوت وب در کنار تگ های HTML کابرد دارد، به عبارتی از CSS برای ایجاد استایل مورد نظر و اعمال جلوه های سفارشی بر روی عناصر صفحات وب استفاده می شود، نمونه پرکاربرد و برجسته این عناصر، خانواده ویژگی های مربوط به فونت (Font) یا مرتبط با آن است که در ادامه به صورت موردی به بررسی آنها می پردازیم.

تعریف فونت در CSS با font و font-family

در CSS فونت را در حالت کلی به شیوه های زیر تعریف می کنیم.
- تعریف مستقیم فونت
در این حالت با استفاده از خاصیت font در CSS اسامی فونت های دلخواه را به عنوان مقدار در نظر می گیریم، این اسامی به ترتیب هستند و با علامت ویرگول (comma یا ,) از هم جداسازی می شوند، در هنگام پردازش صفحات وب مرورگر ابتدا به سراغ اولین فونت می رود، اگر به هر دلیل نتواند این فونت را بارگذاری کند فونت دوم بررسی و همین روال تا هر تعداد فونت تعریف شده ادامه خواهد داشت، در نهایت اگر مرورگر نتواند از هیچ کدام از فونت های در نظر گرفته شده استفاده نماید فونت پیش فرض اعمال خواهد شد.

<style>
body{
    font:Tahoma, Geneva, sans-serif;
}
</style>

- تعریف خانواده فونت
روش متداول دیگر استفاده از خاصیت font-family است، در این حالت علاوه بر اسامی فونت های مد نظر می توانیم خانواده فونت را نیز به عنوان مقدار تنظیم کنیم، منظور از "خانواده" فونت هایی هستند که در یک دسته بندی تعریف شده اند یا اطلاعات و شباهت های مشترکی دارند، انتخاب فونت اصلی طبق روال به صورت ترتیبی خواهد بود و اگر مرورگر نتواند فونت مد نظر را استفاده کند، فونتی را اعمال می کند که بیشترین شباهت را به خانواده در نظر گرفته شده داشته باشد، تعیین خانواده فونت ممکن است بین علامت های دابل کوتیشن ("" یا double quotation) درج شود، در این حالت فونت های بعدی باید از همان خانواده انتخاب شده باشند، مثال:

<style>
body{
    font-family:"Times New Roman", Times, serif;
}
</style>

خانواده فونت می تواند برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (فونت پیش فرض مناسب برای حروف فارسی در وب)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت پیش فرض برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول در دسترس بود دیگر از فونت های بعدی استفاده نمی شود، اما اگر فونت اول وجود نداشت یا به هر دلیل در دسترس نبود، نوبت به استفاده از فونت های بعدی می رسد.
نکته 1: استفاده از فونت هایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مانند برخی فونت های فارسی) ممکن است موجب شود که کاربران صفحه وب به همان شکلی که ما آن را می بینیم نتوانند مطالب را ببینند (به این دلیل که فونت مد نظر در سیستم آنها نصب نیست و قاعدتا با نوع دیگری جایگزین می شود) بر همین اساس اصطلاحی تحت عنوان Web Safe Font یا فونت مطمئن وب وجود دارد که توصیه می کند از فونت هایی در وب استفاده کنیم که در اغلب سیستم ها به طور خودکار نصب شده باشد، فونت sans-serif نمونه برجسته این مبحث است.
نکته 2: برای استفاده از فونت های فارسی دلخواه باید از قابلیتی به نام font-face در CSS استفاده کنیم، به جهت پیشرفته بودن این مبحث و جلوگیری از پیچیده شدن مطلب توضیح این مورد به صورت جداگانه در قسمت آموزش های کاربردی CSS صورت گرفته و در مطلبی با عنوان نحوه استفاده از فونت فارسی در وب در حال حاضر در سایت منتشر شده است.
نکته 3: در صورتی که از استایل خطی یا درون صفحه ای استفاده می کنیم باید همواره صفحه وب خود را در سرویس اعتبارسنجی W3C در آدرس زیر بررسی کنیم.

https://validator.w3.org

به طور مثال فونت Arial از نظر این سرویس نامعتبر است و نباید استفاده شود!

تعیین اندازه فونت در CSS با font-size

تعیین اندازه فونت در CSS با خاصیت font-size امکانپذیر است، اندازه فونت ها در این خاصیت با مقادیر px، em یا به صورت عبارات (به طور مثال large) مشخص می شود (em برگرفته از Element و px برگفته از Pixel است).

<style>
body{
    font-size:12px;
}
</style>

علاوه بر مقادیر پیکسلی می توانیم از em و یا عبارات تعریف شده در CSS استفاده کنیم، بهتر است اندازه فونت بلاک های اصلی و والد صفحه با px تعریف شوند، در حالت em اندازه ها معادل حاصل ضرب با اندازه پیکسلی فونت عنصر والد در نظر گرفته می شوند، به طور مثال اگر مقادیر font-size بلاک والد برابر 12 پیکسل باشد و در تگ فرزند از مقدار 2em استفاده کنیم در واقع معادل 24 پیکسل خواهد بود (24 = 12 * 2)، مثال:

<style>
.parent{
    direction:rtl;
    font-size:12px;
}
.child{
    font-size:2em;
}
</style>
<div class="parent">
فونت 12 پیکسل، مقدار دهی با px
<div class="child">
فونت 24 پیکسل، مقدار دهی با em
</div>
</div>

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

<style>
body{
    direction:rtl;
}
.block-1{
    font-size:2.5em;
}
.block-2{
    font-size:small;
}
</style>
<div class="block-1">
فونت 40 پیکسل، مقدار دهی با em معادل با 2.5 * 16 = 40
</div>
<div class="block-2">
فونت small، مقداردهی با عبارات از پیش تعریف شده.
</div>

با توجه به اینکه در اینجا تگ والد تگ body است و مقدار اولیه ای برای font-size ندارد، عدد 16 به صورت پیش فرض در نظر گرفته می شود.

کشیدگی فونت در CSS با font-stretch

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

<style>
body{
    font-stretch:condensed;
}
</style>

استایل فونت در CSS با font-style

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

<style>
body{
    font-style:oblique;
}
</style>

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

ضخامت فونت در CSS با font-weight

برای نمایش فونت به صورت برجسته می توانیم از خاصیت font-weight در CSS استفاده کنیم، خاصیت های font-weight و font-style در CSS به لحاظ جلوه ظاهری عملکردی مشابه با تگ های b، strong، em و i در HTML دارند.

<style>
body{
    font-weight:bold;
}
</style>

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

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ویژگی های فونت در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.block {
    font-size: 14px;
}
.paragraph {
    font-size: 1.5em;
}
.font-stretch {
    font-stretch: condensed;
}
.font-style {
     font-style: oblique;
}
.font-weight {
    font-weight: 600;
}
</style>
</head>
<body>
جلوه ظاهری فونت در تگ body مقادیر 12px
<hr>
<div class="block">
جلوه ظاهری فونت در کلاس فرضی block مقداردهی با px مقادیر 14px
<p class="paragraph">
جلوه ظاهری فونت در کلاس فرضی paragraph مقداردهی با em مقادیر 1.5em معادل (1.5 * 14 = 21px)
</p>
</div>
<hr>
<div class="font-stretch">
جلوه ظاهری فونت در کلاس فرضی font-stretch<br><br>
خاصیت font-stretch تنها بر روی فونت هایی قابل اعمال است که این امکان در هنگام طراحی فونت در قسمت Face برای آن تعریف شده باشد (دارای Face های متعدد باشد)، این خاصیت در عمل چندان کاربردی نیست و باید فونت های خاص برای آن تعریف کرد!
</div>
<hr>
<div class="font-style">
جلوه ظاهری فونت در کلاس فرضی font-style مقادیر oblique
</div>
<hr>
<div class="font-weight">
جلوه ظاهری فونت در کلاس فرضی font-weight مقادیر 600
</div>
</body>
</html>

پیش نمایش

متن (Text) در CSS

تعریف نوع فونت و ویژگی های آن گام اول برای نمایش محتوا در صفحات وب است، در قدم بعدی نیاز به تنظیم چینش مطالب و نحوه نمایش آنها است که این جلوه های ظاهری با خانواده ویژگی های مربوط به Text ایجاد می شوند.

تنظیم تراز و چینش متن در CSS با text-align

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

<style>
p{
    text-align:justify;
}
</style>

تزئین متن در CSS با text-decoration

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

<style>
a {
    text-decoration:none;
}
</style>

با در نظر گرفتن مقادیر none برای text-decoration در سلکتور a، تمام لینک های صفحه وب به صورت بدون زیرخط نمایش داده می شوند.
برای خاصیت هایی که شامل خط (line) می شوند می توانیم از مقادیر استایل زیر در کنار مقادیر اصلی برای تعیین جلوه ظاهری خط ترسیم شده استفاده کنیم:
- solid: خط عادی (حالت پیش فرض).
- double: خط دوتایی.
- dotted: خط نقطه چین.
- dashed: خط تیره (فاصله).
- wavy: خط موج دار.
علاوه بر این در حالت ترسیم خط می توانیم از مقادیر رنگی مجاز CSS (کدهای Hex، RGB، HSL و رنگ های با نام مانند red، green، blue، lime و...) نیز برای تعیین رنگ خط استفاده کنیم، مثال:

<style>
p {
    text-decoration: wavy underline lime;
}
</style>

این استایل در حالت پیش فرض بر روی تمام تگ های p در صفحه اعمال خواهد شد.

ایجاد متن چمک زن با استفاده از خاصیت animation در CSS

گفتیم که خاصیت blink به دلایلی توسط کنسرسیوم جهانی وب W3C منسوخ شده و در اغلب مرورگرهای امروزی پشتیبانی نمی شود، برای ایجاد این حالت می توانیم از شیوه جایگزین و خاصیت animation در CSS استفاده کنیم، مثال:

<style>
blink, .blink {
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    80% {
        opacity: 0;
    }
}
@keyframes blink {
    80% {
        opacity: 0;
    }
}
</style>
<p class="blink">متن چمک زن</p>

جزئیات خاصیت animation باید در جای خود آموزش داده شود اما در گام فعلی در این حد بدانیم که می توانیم با نمونه استایل بالا در صفحات HTML متن چمک زن ایجاد نمود.

میزان تو رفتگی متن در CSS با text-indent

از ویژگی text-indent در حالتی استفاده می کنیم که بخواهیم خط ابتدای یک پاراگراف نسبت به سایر خطوط به اندازه دلخواه تو رفتگی (فضای خالی پیش از شروع متن) داشته باشد، مقادیر خاصیت text-indent می تواند به صورت px، em یا درصدی باشد.
مثال:

<style>
p{
    text-indent:45px;
}
</style>

امکان در نظر گرفتن مقادیر منفی نیز برای خاصیت text-indent وجود دارد، همچنین می توانیم از دو مقدار آزمایشی hanging و each-line بعد از در نظر گرفتن مقدار عددی استفاده کنیم، مثال:

<style>
p{
    text-indent:4em hanging;
}
</style>

در نظر گرفتن مقادیر hanging باعث برعکس شدن حالت پیش فرض خاصیت text-indent می شود، یعنی تمام خطوط به جزء خط اول حالت تو رفتگی خواهند داشت، همچنین استفاده از مقادیر each-line باعث می شود تا حالت تو رفتگی علاوه بر خط اول پاراگراف به خطوطی که به طور مثال با تگ br شکسته شده اند نیز سرایت کند، یادآور می شویم که hanging و each-line در حال حاضر به صورت آزمایشی معرفی شده اند و ممکن است در مرورگرهای مختلف به درستی عمل نکنند.

ایجاد سایه متن در CSS با text-shadow

خاصیت text-shadow در CSS3 معرفی شد، همان طور که از عبارت shadow مشخص است از این ویژگی برای ایجاد متن سایه دار استفاده می شود، مقداردهی text-shadow به طور کلی به صورت زیر است:

<style>
.text{
    text-shadow:5px 5px 2px #666;
}
</style>

اعداد در مقداردهی بالا به ترتیب نشانه فاصله افقی (Horizontal Shadow محور Xها)، فاصله عمودی (Vertical Shadow محور Yها)، فاصله ماتی (Blur) و رنگ سایه است.
نکته: خاصیت text-shadow در نسخه های ماقبل 10 مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

حروف کوچک و بزرگ در CSS با text-transform

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

<style>
p{
    text-transform:uppercase;
}
</style>

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

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ویژگی های متن در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
a {
    text-decoration: none;
    font-size: 14px;
}
a:hover {
    text-decoration: underline;
}
p {
    text-align: justify;
    width: 200px;
    border: 1px solid #3F9C0C;
}
.indent {
    text-indent: 50px;
    border: 1px solid #2270D9;
}
.shadow {
    text-shadow: 5px 5px 2px #666;
}
.transform {
    text-transform: capitalize;
    border: 1px solid #7639E7;
}
.ltr {
    direction: ltr;
}
</style>
</head>
<body>
جلوه ظاهری متن و <a href="#" title="لینک">لینک</a> در تگ body، با توجه به درنظر گرفتن مقادیر none برای خاصیت text-decoration در سلکتور a، لینک بدون زیرخط نمایش داده می شود، اما در حالت hover و زمانی که نشانه گر ماوس را روی لینک می بریم، حالت underline خواهد داشت.
<hr>
<p>
متن در این پاراگراف با خاصیت text-align و مقادیر justify تنظیم شده است، justify باعث نمایش متن به صورت تمام چین می شود و فضای خالی از هر دو سمت چپ و راست پر خواهد شد.
</p>
<hr>
<p class="indent">
تو رفتگی متن در این پاراگراف با خاصیت text-indent و مقادیر 50px تنظیم شده است، همان طور که اشاره شد مقادیر hanging و each-line در حال حاضر در مرحله آزمایشی قرار دارند و بهتر است به صورت کاربردی استفاده نشوند.
</p>
<hr>
<div class="shadow">
متن سایه دار در CSS با خاصیت text-shadow ایجاد می شود.
</div>
<hr>
<div>
جلوه ظاهری متن زبان انگلیسی در کلاس فرضی transform:<br>
<p class="transform ltr">CSS is easy and powerfull!</p>
</div>
</body>
</html>

پیش نمایش