استایل مقدماتی متن و فونت در CSS — آموزش CSS (بخش بیست و یکم)

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

• سازماندهی CSS — آموزش CSS (بخش بیستم)

استایل‌بندی متن در CSS چه مراحلی دارد؟

همچنان که احتمالاً پیش‌تر در زمان کار با HTML و CSS متوجه شده‌اید، متن درون عناصر، داخل باکس محتوای عنصر قرار می‌گیرد. این متن از سمت چپ-بالا (در مورد زبان‌های راست به چپ از گوشه راست-بالا) شروع شده و به سمت انتهای خط ادامه می‌یابد. زمانی که به انتها برسد، به خط بعدی می‌رود و ادامه می‌دهد تا این که به خط بعدی برسد و به این ترتیب کل محتوا در باکس قرار می‌گیرد. محتوای متنی در عمل شبیه به یک سری از عناصر درون‌خطی رفتار می‌کند که روی خطوط کنار هم قرار می‌گیرند و تا زمانی که به انتهای خط نرسیده‌اند خط نمی‌شکند. مگر این که با درج یک عنصر <b> خط را به صورت دستی بشکنید.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

نکته: اگر مطالب فوق برای شما سنگین است، می‌توانید به مطلب زیر مراجعه کنید:

• مدل جعبه‌ای (Box Model) در CSS — آموزش CSS (بخش یازدهم)

مشخصه‌های CSS که برای طراحی استایل متن استفاده می‌شوند، عموماً در دو دسته جای می‌گیرند که به صورت جداگانه در این مقاله مورد بررسی قرار می‌گیرند:

• استایل‌های فونت: مشخصه‌هایی که بر فونتی که روی متن اعمال شده تأثیر می‌گذارند و نوع فونت استفاده شده، اندازه آن، و انواع استایل‌هایش را تعیین می‌کند.
• استایل‌های لی‌آوت متن: مشخصه‌هایی که بر فاصله‌بندی و دیگر ویژگی‌های لی‌آوت متن تأثیر می‌گذارد. این موارد امکان دستکاری مواردی از قبیل فاصله بین خطوط و حروف و نوع جهت‌گیری متن درون باکس محتوا را تعیین می‌کنند.

نکته: به خاطر بسپارید که متن درون یک عنصر به صورت یک کلیت منفرد تأثیر می‌پذیرد. امکان انتخاب و استایل‌بندی بخش‌هایی از یک متن وجود ندارد، مگر این که آن بخش را درون یک عنصر مناسب مانند <span> یا <strong> قرار دهید و یا از شبه عناصری مانند::first-letter استفاده کنید که حرف نخست متن عنصر را انتخاب می‌کند. همچنین شبه عنصر first-line:: برای انتخاب خط نخست متن عنصر و selection:: برای انتخاب متنی که هم اینک با کرسر هایلایت شده مورد استفاده قرار می‌گیرد.

فونت‌ها

در این بخش به بررسی مشخصه‌های موجود برای استایل‌بندی فونت می‌پردازیم. در مثال زیر برخی مشخصه‌های CSS مختلف روی یک نمونه HTML اعمال کردیم که به صورت زیر است:

1<h1>Tommy the cat</h1>
2
3<p>Well I remember it as though it were a meal ago...</p>
4
5<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
6 may have nestled its way into his mighty throat. Many a fat alley rat 
7had met its demise while staring point blank down the cavernous barrel of
8 this awesome prowling machine. Truly a wonder of nature this urban 
9predator — Tommy the cat had many a story to tell. But it was a rare 
10occasion such as this that he did.</p>

نتیجه کار به صورت تصویر زیر است:

رنگ

مشخصه color رنگ محتوای پیش‌زمینه عناصر انتخاب را تعیین می‌کند که عموماً شامل متن آن عنصر است، اما در پاره‌ای موارد می‌تواند چیزهای دیگری از قبیل یک زیرخط یا روخط باشد که به جای متن با استفاده از مشخصه text-decoration درج شده است.

Color می‌تواند هر واحد رنگی CSS مانند زیر را بپذیرد:

1p {
2  color: red;
3}

کد فوق موجب می‌شود که پاراگراف به رنگ قرمز درآید و از رنگ سیاه پیش‌فرض مرورگر متمایز شود:

خانواده فونت

برای تعیین یک فونت متفاوت برای متن می‌توان از مشخصه font-family استفاده کرد. این مشخصه به ما امکان می‌دهد که یک فونت (یا فهرستی از فونت‌ها) برای مرورگر تعیین کنیم که روی عناصر انتخابی اعمال می‌شوند. مرورگر تنها در صورتی یک فونت را به کار می‌گیرد که آن فونت روی دستگاهی که وب‌سایت روی آن بازدید می‌شود موجود باشد. اگر چنین نباشد، مرورگر از «فونت پیش‌فرض» (default font) استفاده می‌کند. به مثال ساده زیر توجه کنید:

1p {
2  font-family: arial;
3}

کد فوق موجب می‌شود که همه پاراگراف‌های صفحه از فونت arial استفاده کنند که روی هر رایانه‌ای موجود است.

فونت‌های مناسب وب

زمانی که از دسترسی به فونت صحبت می‌کنیم، تنها چند فونت هستند که روی همه سیستم‌ها وجود دارند و از این رو می‌توانند بدون دغدغه از آن‌ها استفاده کرد این فونت‌ها به نام «فونت‌های مناسب وب» (web safe fonts) خوانده می‌شوند.

در اغلب موارد ما به عنوان توسعه‌دهنده وب باید کنترل ویژه‌ای روی فونت‌هایی که برای نمایش محتوای متنی استفاده می‌کنیم داشته باشیم. مشکل این است که باید فونتی پیدا کنیم که مطمئن باشیم روی رایانه مورد استفاده برای بازدید صفحه‌های وب وجود خواهد داشت. هیچ روشی برای دانستن این مسئله وجود ندارد، اما فونت‌های مناسب وب روی تقریباً همه وهله‌های غالب سیستم‌های عامل مورد استفاده مانند ویندوز، مک، اغلب توزیع‌های رایج لینوکس، اندروید و iOS وجود دارند.

فهرست فونت‌های مناسب وب با تکامل سیستم‌های عامل تغییرمی یابند، اما دست کم در حال حاضر می‌توان فونت‌های زیر را در این دسته معرفی کرد:

نکته: اغلب این فونت‌ها به لطف ابتکار مایکروسافت به نام Core fonts for the Web که در اواخر دهه 90 و اوایل 2000 اجرا شد، کاربرد گسترده‌ای یافته‌اند.

نکته: منابع مختلفی برای بررسی فونت‌های مناسب وب وجود دارند. از جمله وب‌سایت cssfontstack.com فهرستی از فونت‌های موجود برای سیستم‌های عامل ویندوز و مک ارائه کرده است که می‌تواند به تصمیم‌گیری در مورد کاربرد فونت‌های مناسب وب کمک کند.

نکته: روشی برای دانلود یک فونت سفارشی همراه با یک صفحه وب وجود دارند که امکان سفارشی‌سازی فونت مورد استفاده را در هر حالت فراهم ساخته و web fonts نام دارد. این موضوع کمی پیچیده‌تر است و این موضوع را در بخش‌های بعدی این سری مقالات آموزشی بررسی خواهیم کرد.

فونت‌های پیش‌فرض

CSS پنج نام ژنریک برای فونت‌ها تعریف می‌کند: serif، sans-serif، monospace، cursive و fantasy. این نام‌ها بسیار ژنریک هستند و تصمیم‌گیری در مورد استفاده از فونت روی هر مرورگر و سیستم عامل خاص به فونت‌فیس‌های دقیقی که در زمان استفاده از این نام‌های ژنریک روی آن سیستم موجود باشند وابسته خواهد بود. در واقع این فونت پیش‌فرض برای سناریوی بدترین حالت است که مرورگر تلاش می‌کند تا دست کم یک فونت که مناسب باشد پیدا کند. serif ،sans-serif و monospace فونت‌های مشخصی هستند که چیز معقولی نمایش می‌دهند. از سوی دیگر cursive و fantasy قابلیت پیش‌بینی کمتری دارند و پیشنهاد می‌شود از آن‌ها با دقت استفاده شود و کاملاً تست شوند. این پنج نام به صورت زیر تعریف می‌شوند:

مجموعه فونت

از آنجا که نمی‌توان تضمین کرد حتماً فونت‌های مورد استفاده در صفحه‌های وب وجود ندارند، می‌توان یک «مجموعه فونت» (font stack) تعیین کرد تا مرورگر از بین آن‌ها یکی را انتخاب کند. این مجموعه شامل یک مقدار font-family است که از چند نام فونت تشکیل یافته است که با کاما از هم جدا می‌شوند:

1p {
2  font-family: "Trebuchet MS", Verdana, sans-serif;
3}

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

بهتر است در انتهای لیست نام یک فونت مناسب عمومی را ذکر کنید تا اگر هیچ کدام از فونت‌های فهرست موجود نبودند، دست کم مرورگر بتواند یک فونت مناسب پیدا کند. برای تأکید بر اهمیت این نکته باید اشاره کنیم که اگر هیچ فونتی از این مجموعه نباشد، پاراگراف‌ها به صورت پیش‌فرض از سوی مرورگر یک فونت serif می‌گیرند که معمولاً Times New Roman است و فونت مناسب غیر serif وجود ندارند.

نکته: نام‌های فونت‌هایی که بیش از یک کلمه هستند مانند Trebuchet MS به این صورت "Trebuchet MS" درون گیومه قرار می‌گیرند.

مثالی از یک خانواده فونت

در این بخش یک فونت sans-serif به پاراگراف خود می‌دهیم:

1p {
2  color: red;
3  font-family: Helvetica, Arial, sans-serif;
4}

بدین ترتیب نتیجه زیر حاصل می‌شود:

اندازه فونت

در یکی از بخش‌های قبلی سری مقالات در مورد اندازه و طول واحدهای مورد استفاده در CSS صحبت کردیم:

• مقادیر و واحدهای CSS — آموزش CSS (بخش پانزدهم)

اندازه فونت که با مشخصه font-size تعیین می‌شود، می‌تواند مقادیری دریافت کند که در اغلب موارد از این واحدها استفاده می‌کنند، اما در اغلب موارد از واحدهای زیر برای تعیین اندازه متن استفاده می‌کنیم:

• px (پیکسل) – تعداد پیکسل‌هایی که می‌خواهیم متن به آن اندازه باشد را بیان می‌کنیم. این یک واحد مطلق است یعنی مقدار نهایی محاسبه شده برای فونت روی صفحه در هر موقعیتی یکسان خواهد بود.
• em – یک em برابر با اندازه فونت تعیین شده در عنصر والد عنصر جاری که استایل‌بندی می‌کنیم است. این اندازه به طور خاص برابر با عرض یک حرف بزرگ M در عنصر والد است. اگر لازم باشد که عناصر تودرتوی زیادی با اندازه‌های فونت متفاوت وجود داشته باشند، کار کمی پیچیده می‌شود، اما قابل اجرا است و در مثال زیر بررسی کرده‌ایم. بنابراین جای نگرانی نیست و زمانی که به استفاده از آن عادت کنید به روال طبیعی تبدیل می‌شود و می‌توانید از em برای اندازه بندی هر چیزی و نه فقط متن استفاده کنید. برای مثال می‌توان یک وب‌سایت کامل داشت که کلاً با em اندازه بندی شده است و به این ترتیب نگهداری آسانی خواهد داشت.
• rem – این مشخصه نیز شبیه em است به جز این که 1 rem برابر با اندازه فونت روی عنصر ریشه سند خواهد بود و نه عنصر والد. این حالت موجب می‌شود که محاسبات اندازه فونت آسان‌تر شود. با این حال اگر می‌خواهید از مرورگرهای خیلی قدیمی هم پشتیبانی کنید، به زحمت می‌افتید زیرا اینترنت اکسپلورر نسخه 8 و پایین‌تر از آن پشتیبانی نمی‌کنند.

مشخصه font-size یک عنصر از مشخصه عنصر والد ارث‌بری می‌کند. همه این‌ها از عنصر ریشه سند کل یعنی <html> آغاز می‌شوند و مشخصه font-size آن نیز به صورت استاندارد و پیش‌فرض بین همه مرورگرها روی 16px تنظیم می‌شود. هر پاراگراف (یا هر عنصر دیگر که اندازه font-size مجزایی برای آن تعیین نشده باشد) و درون عنصر root قرار داشته باشد دارای اندازه نهایی 16 پیکسل خواهد بود. عناصر دیگر ممکن است اندازه‌های پیش‌فرض دیگری داشته باشند، برای نمونه عنصر <h1> دارای اندازه 2em است که به صورت پیش‌فرض تعیین شده است و اندازه نهایی آن برابر با 32 پیکسل خواهد بود.

این موارد زمانی که شروع به دستکاری اندازه فونت عناصر تودرتو بکنید پیچیده می‌شوند. برای نمونه اگر یک عنصر <article> در صفحه داشته باشید و اندازه فونت آن را روی 1.5 em تنظیم کنید باید در عمل اندازه نهایی 24 پیکسل را بدهد. اما اگر بعداً بخواهید پاراگراف درون عناصر <article> اندازه محاسبه شده فونت 20 پیکسل داشته باشند، باید از چه مقدار em استفاده کنید؟

1<!-- document base font-size is 16px -->
2<article> <!-- If my font-size is 1.5em -->
3  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
4</article>

شما باید مقدار em آن را روی 24/20 یا 0.83333333 em تنظیم کنید. این محاسبات می‌تواند پیچیده باشند و از این رو باید در مورد شیوه استایل‌بندی موارد مختلف هوشیار باشید. بهتر است تا جایی که می‌توانید از rem استفاده کنید تا همه چیز ساده بماند و از تنظیم مشخصه font-size عناصر کانتینر تا حد امکان اجتناب شود.

یک مثال ساده از اندازه‌بندی

زمانی که می‌خواهیم متن را اندازه بندی کنیم، معمولاً بهتر است یک مشخصه font-size مبنای برای سند به میزان 10px تنظیم کنید، به طوری که در ادامه محاسبه موارد مختلف آسان‌تر باشد. به این ترتیب مقادیر مورد نیاز (r)em برابر با اندازه پیکسلی فونت تقسیم بر 10 و نه 16 خواهند بود. پس از انجام این کار، می‌توانید اندازه انواع مختلف متن را در سند تنظیم کنید. همچنین خوب است که همه مجموعه قواعد font-size را در یک بخش اختصاصی از استایل‌شیت جمع کنید تا یافتن آن‌ها آسان‌تر باشد. نتیجه این اقدامات به صورت زیر است:

1html {
2  font-size: 10px;
3}
4
5h1 {
6  font-size: 5rem;
7}
8
9p {
10  font-size: 1.5rem;
11  color: red;
12  font-family: Helvetica, Arial, sans-serif;
13}

استایل فونت، وزن فونت، تبدیل متن و تزیین متن

CSS چهار مشخصه برای دستکاری وزن/تأکید بصری متن ارائه می‌کند:

• font-style – برای ایتالیک ساختن متن استفاده می‌شود. مقادیر ممکن به شرح زیر هستند (البته به ندرت از این‌ها استفاده می‌کنیم، مگر این که بخواهیم به دلیل خاصی استایل‌بندی ایتالیک را فعال یا غیرفعال کنیم):
  • normal – متن را روی فونت نرمال تنظیم می‌کند (ایتالیک را غیرفعال می‌کند)
  • Italic – متن را طوری تنظیم می‌کند که از نسخه ایتالیک فونت (در صورت وجود) استفاده کند. اگر حالت ایتالیک وجود نداشته باشد، آن را با حالت oblique شبیه‌سازی می‌کند.
  • Oblique – متن را طوری تنظیم می‌کند که نسخه شبیه‌سازی‌شده از یک فونت ایتالیک باشد. این حالت با ایجاد کجی در نسخه نرمال فونت ایجاد می‌شود.
• font-weight – میزان درشت بودن فونت را تنظیم می‌کند. در صورتی که نسخه‌های متفاوتی از فونت موجود باشد، این مشخصه می‌تواند حالت‌های بسیار زیادی از قبیل light، -normal،-bold،-extrabold، -black و غیره داشته باشد. اما در عمل به ندرت از هیچ کدام به جز normal و bold استفاده می‌کنیم.
  • normal, bold – وزن‌های فونت نرمال و بولد.
  • lighter, bolder – میزان درشتی عنصر کنونی را یک گام نازک‌تر یا سنگین‌تر از درشتی عنصر والد تنظیم می‌کند.
  • 100-900 – میزان درشتی عددی است که کنترل دقیق‌تری نسبت به کلیدواژه‌های فوق ارائه می‌کند.
• text-transform – امکان تعیین تبدیل فونت را فراهم می‌سازد. مقادیر مختلف شامل فهرست زیر هستند:
  • none – از هر نوع تبدیل جلوگیری می‌کند.
  • Uppercase – همه متن را به حروف بزرگ تبدیل می‌کند.
  • Lowercase – همه متن را به حروف کوچک تبدیل می‌کند.
  • capitalize – حروف اول همه کلمه‌ها را بزرگ می‌سازد.
  • full-width – همه «گلیف‌ها» (glyph) که درون کادری با عرض ثابت نوشته شده‌اند به فونتی شبیه monospace تبدیل می‌کند تا امکان همراستا کردن کاراکترهای الفبای لاتین همراه با گلیف‌های زبان‌های آسیایی فراهم شود.
• text-decoration – موارد تزئینی را روی فونت فعال با غیرفعال می‌کند. از آن به صورت عمده برای حذف استایل‌های پیش‌فرض زیرخط روی لینک‌ها استفاده می‌شود. مقادیر ممکن برای آن چنین هستند:
  • none – هر گونه تزئین از قبل موجود را غیرفعال می‌کند.
  • Underline – متن را به صورت زیرخط دار درمی‌آورد.
  • Overline – یک روخط برای متن ایجاد می‌کند.
  • line-through – یک خط روی متن قرار می‌دهد.

توجه داشته باشید که مشخصه text-decoration می‌تواند همزمان چندین مقدار بگیرد و می‌توانید چندین مورد تزیینی را همزمان به متن اضافه کنید. همچنین توجه کنید که text-decoration یک مشخصه اختصاری برای مشخصه‌های text-decoration-line, text-decoration-style و and text-decoration-color است. ترکیب کردن این مشخصه‌ها می‌تواند جلوه‌های جذابی مانند زیر ایجاد کند:

text-decoration: line-through red wavy.

در مثال زیر کاربرد برخی از این مشخصه‌ها را بررسی می‌کنیم:

1html {
2  font-size: 10px;
3}
4
5h1 {
6  font-size: 5rem;
7  text-transform: capitalize;
8}
9
10h1 + p {
11  font-weight: bold;
12}
13
14p {
15  font-size: 1.5rem;
16  color: red;
17  font-family: Helvetica, Arial, sans-serif;
18}

نتیجه کار به صورت زیر است:

جلوه‌های سایه متن

امکان افزودن سایه به متن با استفاده از مشخصه text-shadow فراهم آمده است. این مشخصه چهار مقدار می‌گیرد که در مثال زیر نمایش یافته‌اند:

1text-shadow: 4px 4px 5px red;

توضیح این چهار مشخصه به ترتیب به صورت زیر است:

1. خصوصیت اول آفست افقی سایه از متن اصلی را تعیین می‌کند – این مقدار می‌تواند اغلب معیارها و اندازه‌های CSS را داشته باشد، اما به طور عمده استفاده از مقادیر مثبت px موجب حرکت سایه به سمت راست، و مقادیر منفی موجب جابجایی آن به سمت چپ متن می‌شوند. این مقادیر باید حتماً مورد اشاره قرار گیرند.
2. خصوصیت دوم این مشخصه آفست عمودی سایه از متن اصلی را نشان می‌دهد – این خصوصیت رفتاری شبیه آفست افقی دارد به جز این که سایه را در جهت بالا و پایین جابجا می‌کند و نه راست/چپ. تعیین این مقدار نیز الزامی است.
3. شعاع مات بودن – هر چه مقدار خصوصیت سوم این مشخصه بیشتر باشد، سایه بیشتر پخش می‌شود. اگر این مقدار مشخص نشده باشد، از مقدار پیش‌فرض 0 استفاده می‌شود که به معنی عدم وجود مات شدگی سایه است. این خصوصیت نیز می‌تواند اغلب مقادیر و واحدهای CSS را بگیرد.
4. رنگ پایه سایه - خصوصیت چهارم این مشخصه رنگ سایه را تعیین می‌کند و می‌تواند هر معیار رنگی CSS باشد. اگر این مقدار تعیین نشده باشد، رنگ پیش‌فرض «سیاه» (black) است.

سایه‌های چندگانه

امکان استفاده از سایه‌های چندگانه روی یک متن واحد با گنجاندن مقادیر چندگانه سایه که با کاما از هم جدا می‌شوند وجود دارد. به مثال زیر توجه کنید:

1text-shadow: 1px 1px 1px red,
2             2px 2px 1px red;

اگر آن را روی عنصر <h1> اعمال کنیم، مثال قبلی به صورت زیر درمی‌آید:

لی‌آوت متن

اکنون که با مشخصه‌های مقدماتی فونت متن آشنا شدیم، نوبت آن رسیده است که به بررسی مشخصه‌هایی بپردازیم که با آن‌ها می‌توان روی لی‌آوت متن تأثیر گذاشت.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

جهت‌گیری متن

مشخصه text-align برای کنترل نوع جهت‌گیری متن درون باکس پیرامونی استفاده می‌شود. مقادیر ممکن به شرح زیر هستند و کاملاً مشابه هر برنامه واژه‌پرداز معمولی عمل می‌کنند:

• Left – متن را چپ-چین می‌کند.
• Right – متن را راست-چین می‌کند.
• Center – جهت‌گیری متن را مرکزی می‌سازد.
• Justify – موجب می‌شود که متن توزیع شود و فاصله‌هایی بین کلمات ایجاد می‌شود تا همه خطوط دارای عرض یکسانی شوند. این خصوصیت باید با دقت زیادی استفاده شود، زیرا ممکن است ظاهر بدی به متن بدهد. به خصوص در مواردی که روی پاراگرافی با کلمات خیلی طولانی اعمال شود دردسر تولید می‌کند. اگر می‌خواهید از این خصوصیت استفاده کنید، باید در مورد استفاده از چیز دیگری مانند hyphens به همراهان نیز اقدام کنید تا مقداری از کلمه‌ها در میان خطوط شکسته شوند.

اگر مشخصه ;ext-align: center; روی عنصر <h1> مثال فوق اعمال شود، ظاهری مانند زیر می‌یابد:

ارتفاع خط

مشخصه line-height ارتفاع هر خط از متن را تعیین می‌کند. این مشخصه می‌تواند اغلب معیارها و مقیاس‌های اندازه CSS را بگیرد، اما می‌تواند مقدار بدون واحد نیز داشته باشد. این مقادیر بدون واحد مانند یک مضرب عمل می‌کنند تا line-height به دست آید. زمانی که خطوط از هم فاصله می‌گیرند، بدنه متن معمولاً زیباتر به نظرمی رسد و راحت‌تر خوانده می‌شود. ارتفاع خط پیشنهاد شده معمولاً حدود 1.5 تا 2 است. برای این که ارتفاع متن را 1.6 برابر ارتفاع فونت بکنیم باید از کد زیر بهره بگیریم:

1line-height: 1.6;

اعمال کد فوق روی مثال قبلی موجب تولید نتیجه زیر می‌شود:

فاصله‌بندی حروف و کلمات

مشخصه‌های letter-spacing و word-spacing به ترتیب امکان تعیین فاصله‌بندی بین حروف و کلمه‌ها را فراهم می‌سازند. معمولاً از این مشخصه‌ها استفاده گسترده‌ای نمی‌شود، اما اگر بخواهید ظاهر خاصی ایجاد کنید، یا خوانایی یک فونت متراکم خاص را بهبود ببخشید، استفاده از آن‌ها می‌تواند مفید باشد. این مشخصه‌ها نیز از اغلب معیارها و مقیاس‌های CSS استفاده می‌کنند.

به عنوان نمونه می‌توانیم با استفاده از کد زیر نوعی فاصله‌بندی کلمه و حرف را روی خط نخست هر عنصر <p> اعمال کنیم:

1p::first-line {
2  letter-spacing: 4px;
3  word-spacing: 4px;
4}

اینک مثال ما به صورت زیر در آمده است:

برخی مشخصه‌های مفید دیگر

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

استایل‌های فونت

• font-variant – بین فونت small caps و نرمال سوئیچ می‌کند.
• font-kerning – گینه‌های kerning را فعال یا غیرفعال می‌کند.
• font-feature-settings – ویژگی‌های مختلف را فعال یا غیرفعال می‌کند.
• font-variant-alternates – استفاده از گلیف‌های جایگزین را برای یک فونت‌فیس خاص کنترل می‌کند.
• font-variant-caps – استفاده از گلیف‌های بزرگ جایگزین را کنترل می‌کند.
• font-variant-east-asian – استفاده از گلیف‌های جایگزین را برای متون به زبان‌های آسیای شرقی مانند ژاپنی و چینی کنترل می‌کند.
• font-variant-ligatures – شکل‌های ligature و زمینه‌ای مورد استفاده در متن را کنترل می‌کند.
• font-variant-numeric – کاربرد گلیف‌های جایگزین برای اعداد، کسرها و دیگر نشانگرهای معمولی را کنترل می‌کند.
• font-variant-position – کاربرد گلیف‌های جایگزین با اندازه کوچک که به عنوان زیرنویس یا بالانویس درج می‌شوند را کنترل می‌کند.
• font-size-adjust – اندازه بصری فونت را مستقل از اندازه واقعی آن کنترل می‌کند.
• font-stretch – بین نسخه‌های کشیده شده جایگزین یک فونت سوئیچ می‌کند.
• text-underline-position – موقعیت زیرخط‌ها را که با استفاده از مقدار underline مشخصه text-decoration-line تنظیم شده، مشخص می‌سازد.
• text-rendering – تلاش می‌کند نوعی بهینه‌سازی رندرینگ متن اجرا کند.

استایل‌های لی‌آوت متن

• text-indent – میزان فاصله افقی که پیش از آغاز نخست خط از محتوای متنی باید از چپ ایجاد شود را تعیین می‌کند.
• text-overflow – شیوه اعلام کردن سرریز محتوایی که دیده نمی‌شود را به کاربران تعیین می‌کند.
• white-space – شیوه مدیریت فواصل خالی و شکستگی خطوط مرتبط درون عنصر را تعریف می‌کند.
• word-break – شکستگی خطوط یا عدم شکستگی آن را در میان کلمات تعیین می‌کند.
• Direction – جهت متن را تعیین می‌کند. این مورد به زبان وابسته است و معمولاً بهتر است اجازه دهیم HTML به عنوان بخشی که با محتوای متنی مرتبط است آن را مدیریت کند.
• Hyphens – تیره گذاری را برای زبان‌هایی که از آن پشتیبانی می‌کنند، فعال یا غیرفعال می‌سازد.
• line-break – شکستگی خطوط را برای زبان‌های آسیایی کاهش داده یا افزایش می‌دهد.
• text-align-last – شیوه جهت‌گیری آخرین خط یک بلوک یا متن را درست پیش از کاراکتر شکستن خط تعیین می‌کند.
• text-orientation – نوع قرارگیری متن در یک خط را تعیین می‌کند.
• overflow-wrap – امکان شکستن خط در میان کلمات را از سوی مرورگر برای جلوگیری از سرریز مشخص می‌سازد.
• writing-mode – نوع قرارگیری افقی یا عمودی خطوط متن و جهت‌گیری خطوط بعدی را تعیین می‌کند.

مشخصه اختصاری font

بسیاری از مشخصه‌های فونت می‌توانند از طریق مشخصه اختصاری font نیز تعیین شوند. این مشخصه‌ها به ترتیب زیر نوشته می‌شوند:

• font-style
• font-variant
• font-weight
• font-stretch
• font-size
• line-height
• font-family

در میان این مشخصه‌ها تنها موارد font-size و font-family در زمان استفاده از مشخصه اختصاری font ضروری هستند. بین مشخصه‌های font-size و line-height باید از یک کاراکتر (/) استفاده شود. مثال کامل به صورت زیر است:

1font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

سخن پایانی

امیدواریم از مطالعه این راهنما در خصوص کار با متن در CSS بهره‌مند شده باشید. در بخش بعدی این سری مقالات هر آنچه باید در مورد استایل‌بندی لیست‌های HTML بدانید را توضیح می‌دهیم. برای مطالعه بخش بعدی این سری مقالات روی لینک زیر کلیک کنید:

• استایل لیست در CSS — آموزش CSS (بخش بیست و دوم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش مقدماتی پیش پردازنده Less و توسعه پذیری CSS
• طراحی تایمر معکوس با HTML ،CSS و JavaScript — به زبان ساده
• ساخت لینک‌های زیبا با CSS — از صفر تا صد

==