آموزش CSS پیشرفته : استایلدهی اولیه متن و فونت
در این مقاله، سفر شما را به سوی تسلط بر سبکبندی متن با CSS آغاز خواهیم کرد. در اینجا تمام اصول اولیه سبکبندی متن/فونت را با جزئیات بررسی خواهیم کرد، از جمله تنظیم وزن فونت، خانواده و سبک آن، خلاصهنویسی فونت، ترازبندی متن و سایر جلوهها و فاصلهگذاری خطوط و حروف.
استایلدهی به متن در CSS شامل چه مواردی میشود؟
متن درون یک عنصر، درون کادر محتوای عنصر قرار میگیرد. این متن از بالا سمت چپ ناحیه محتوا (یا بالا سمت راست، در مورد محتوای زبان RTL) شروع میشود و به سمت انتهای خط جریان مییابد. پس از رسیدن به انتها، به خط بعدی میرود و دوباره به انتها جریان مییابد. این الگو تا زمانی که تمام محتوا در کادر قرار گیرد، تکرار میشود. محتوای متن عملاً مانند مجموعهای از عناصر درونخطی رفتار میکند، که روی خطوط مجاور یکدیگر قرار میگیرند و تا رسیدن به انتهای خط، یا مگر اینکه شما با استفاده از عنصر به صورت دستی یک خط جدید ایجاد کنید، شکست خط ایجاد نمیکند.
اگر پاراگراف بالا شما را گیج کرده است، اشکالی ندارد - قبل از ادامه مطلب، به مقاله مدل جعبهای ما برگردید و آن را مرور کنید تا با نظریه مدل جعبهای آشنا شوید.
ویژگیهای CSS مورد استفاده برای سبکدهی متن عموماً در دو دسته قرار میگیرند که در این مقاله به طور جداگانه به آنها خواهیم پرداخت:
- سبکهای فونت: ویژگیهایی که بر فونت متن تأثیر میگذارند، مثلاً اینکه کدام فونت اعمال شود، اندازه آن و اینکه آیا پررنگ، ایتالیک و غیره باشد.
- سبکهای طرحبندی متن: ویژگیهایی که بر فاصلهگذاری و سایر ویژگیهای طرحبندی متن تأثیر میگذارند و امکان دستکاری، مثلاً فاصله بین خطوط و حروف و نحوه ترازبندی متن در کادر محتوا را فراهم میکنند.
به خاطر داشته باشید که متن درون یک عنصر، همگی به عنوان یک موجودیت واحد تحت تأثیر قرار میگیرند. شما نمیتوانید زیربخشهای متن را انتخاب و سبکدهی کنید، مگر اینکه آنها را در یک عنصر مناسب (مانند یا ) قرار دهید، یا از یک شبه عنصر مختص متن مانند (حرف اول متن یک عنصر را انتخاب میکند)، (خط اول متن یک عنصر را انتخاب میکند) یا (متنی را که در حال حاضر توسط مکاننما هایلایت شده است انتخاب میکند) استفاده کنید.
بیایید مستقیماً به سراغ ویژگیهای استایلدهی فونتها برویم. در این مثال، برخی از ویژگیهای CSS را به نمونه HTML زیر اعمال خواهیم کرد:
ویژگی color رنگ محتوای پیشزمینه عناصر انتخابشده را تنظیم میکند که معمولاً متن است، اما میتواند شامل چند چیز دیگر نیز باشد، مانند زیرخط یا روی خط قرار داده شده روی متن با استفاده از ویژگی text-decoration.
رنگ میتواند هر واحد رنگ CSS را بپذیرد، به عنوان مثال:
برای تنظیم فونت متفاوت برای متن خود، از ویژگی font-family استفاده میکنید - این به شما امکان میدهد یک فونت (یا لیستی از فونتها) را برای مرورگر مشخص کنید تا روی عناصر انتخاب شده اعمال شود. مرورگر فقط در صورتی فونتی را اعمال میکند که در دستگاهی که وبسایت در آن دسترسی پیدا میکند، موجود باشد. در غیر این صورت، فقط از فونت پیشفرض مرورگر استفاده میکند. یک مثال ساده به این شکل است:
این باعث میشود تمام پاراگرافهای یک صفحه فونت Arial را که در هر کامپیوتری یافت میشود، بپذیرند.
صحبت از در دسترس بودن فونت شد، فقط تعداد مشخصی فونت وجود دارد که عموماً در همه سیستمها موجود هستند و بنابراین میتوان بدون نگرانی زیاد از آنها استفاده کرد. اینها به اصطلاح فونتهای ایمن وب هستند.
اغلب اوقات، به عنوان توسعهدهندگان وب، میخواهیم کنترل خاصتری بر فونتهای مورد استفاده برای نمایش محتوای متن خود داشته باشیم. مشکل این است که راهی پیدا کنیم تا بدانیم کدام فونت در رایانهای که برای دیدن صفحات وب ما استفاده میشود، موجود است. هیچ راهی برای دانستن این موضوع در هر مورد وجود ندارد، اما فونتهای ایمن وب تقریباً در همه موارد از پرکاربردترین سیستم عاملها (ویندوز، macOS، رایجترین توزیعهای لینوکس، اندروید و iOS) موجود هستند.
لیست فونتهای ایمن وب واقعی با تکامل سیستمهای عامل تغییر خواهد کرد، اما منطقی است که فونتهای زیر را حداقل فعلاً ایمن وب در نظر بگیریم (بسیاری از آنها به لطف ابتکار فونتهای Microsoft Core برای وب در اواخر دهه 90 و اوایل دهه 2000 محبوبیت پیدا کردهاند):
| نام | نوع عمومی | یادداشتها |
|---|
| Arial | sans-serif | اغلب بهترین روش، اضافه کردن Helvetica به عنوان جایگزین ارجح Arial در نظر گرفته میشود، زیرا اگرچه فونتهای آنها تقریباً یکسان است، Helvetica شکل زیباتری دارد، حتی اگر Arial به طور گستردهتری در دسترس باشد. |
| Courier New | monospace | بعضی از سیستمعاملها یک نسخه جایگزین (احتمالاً قدیمیتر) از فونت Courier New به نام Courier دارند. بهترین روش استفاده از هر دو فونت و ترجیحاً Courier New است. |
| Georgia | serif | |
| Times New Roman | serif | بعضی از سیستمعاملها یک نسخه جایگزین (احتمالاً قدیمیتر) از فونت Times New Roman به نام Times دارند. بهترین روش استفاده از هر دو فونت و ترجیحاً Times New Roman است. |
| Trebuchet MS | sans-serif | شما باید در استفاده از این فونت مراقب باشید - این فونت به طور گسترده در سیستم عامل های موبایل در دسترس نیست. |
| Verdana | sans-serif | |
CSS پنج نام عمومی برای فونتها تعریف میکند: serif، sans-serif، monospace، cursive و fantasy. این نامها بسیار عمومی هستند و شکل دقیق فونت مورد استفاده از این نامهای عمومی میتواند بین هر مرورگر و هر سیستم عاملی که در آن نمایش داده میشوند، متفاوت باشد. این بدترین سناریوی ممکن است که در آن مرورگر تمام تلاش خود را میکند تا فونتی ارائه دهد که مناسب به نظر برسد. serif، sans-serif و monospace کاملاً قابل پیشبینی هستند و باید چیزی معقول ارائه دهند. از سوی دیگر، cursive و fantasy کمتر قابل پیشبینی هستند و توصیه میکنیم با دقت از آنها استفاده کنید و در حین کار آنها را آزمایش کنید.
این پنج نام به شرح زیر تعریف شدهاند:
| اصطلاح | تعریف |
|---|
| serif | فونتهایی که سریف دارند (همان تزئینات و جزئیات کوچکی که در انتهای خطوط برخی از فونتها میبینید). |
| sans-serif | فونتهایی که سریف ندارند. |
| monospace | فونتهایی که در آنها هر کاراکتر عرض یکسانی دارد، معمولاً در فهرستهای کد استفاده میشوند. |
| cursive | فونتهایی که برای تقلید دستخط، با خطوط روان و متصل طراحی شدهاند. |
| fantasy | فونتهایی که برای تزیین طراحی شدهاند. |
در چنین حالتی، مرورگر از ابتدای لیست شروع میکند و بررسی میکند که آیا آن فونت در دستگاه موجود است یا خیر. اگر موجود باشد، آن فونت را روی عناصر انتخاب شده اعمال میکند. اگر نباشد، به سراغ فونت بعدی میرود و به همین ترتیب ادامه میدهد.
ایده خوبی است که یک نام فونت عمومی مناسب در انتهای پشته ارائه دهید تا اگر هیچ یک از فونتهای فهرست شده موجود نبود، مرورگر حداقل بتواند چیزی تقریباً مناسب ارائه دهد. برای تأکید بر این نکته، اگر گزینه دیگری در دسترس نباشد - که معمولاً Times New Roman است - پاراگرافها با فونت پیشفرض serif مرورگر نمایش داده میشوند - این برای یک فونت sans-serif خوب نیست!
اگرچه میتوانید از نامهای خانوادگی فونت که شامل فاصله هستند، مانند Trebuchet MS، بدون نقل قول استفاده کنید تا از اشتباهات در escape جلوگیری شود، اما توصیه میشود نامهای خانوادگی فونت که شامل فاصله، اعداد یا کاراکترهای نگارشی غیر از خط فاصله هستند را در نقل قول قرار دهید.
هر نام خانوادگی فونت که ممکن است به اشتباه به عنوان یک نام خانوادگی عمومی یا یک کلمه کلیدی در سطح CSS تفسیر شود، باید در نقل قول قرار گیرد. در حالی که نامهای خانوادگی فونت میتوانند به صورت یا درج شوند، نامهای خانوادگی فونتی که با مقدار ویژگی در سطح CSS یکسان هستند، مانند initial یا inherit، یا CSS آنها نامی مشابه با یکی از نامهای خانوادگی فونت عمومی، مانند sans-serif یا fantasy، دارد، باید به صورت یک رشته نقل قول درج شوند. در غیر این صورت، نام خانوادگی فونت به عنوان کلمه کلیدی معادل CSS یا نام خانوادگی عمومی تفسیر میشود. هنگامی که به عنوان کلمات کلیدی استفاده میشوند، نامهای خانوادگی فونت عمومی - serif، sans-serif، monospace، cursive و fantasy - و کلمات کلیدی سراسری CSS نباید در نقل قول قرار گیرند، زیرا رشتهها به عنوان کلمات کلیدی CSS تفسیر نمیشوند.
بیایید به مثال قبلی خود اضافه کنیم و به پاراگرافها فونت sans-serif بدهیم:
در مقاله قبلی ماژول ما در مورد مقادیر و واحدهای CSS، واحدهای طول و اندازه را بررسی کردیم. اندازه فونت (که با ویژگی font-size تنظیم میشود) میتواند مقادیری را که در اکثر این واحدها (و سایر واحدها، مانند درصد) اندازهگیری میشوند، بپذیرد. با این حال، رایجترین واحدهایی که برای اندازه متن استفاده میکنید عبارتند از:
px (پیکسل): تعداد پیکسلهایی که میخواهید متن در ارتفاع باشد. این یک واحد مطلق است - تقریباً در هر موقعیتی، مقدار محاسبهشده نهایی یکسانی را برای فونت روی صفحه نتیجه میدهد.
ems: 1 em برابر است با اندازه فونت تنظیمشده روی عنصر والد عنصر فعلی که در حال استایلبندی آن هستیم (بهطور خاصتر، عرض یک حرف بزرگ M که درون عنصر والد قرار دارد). اگر عناصر تودرتو زیادی با اندازههای فونت مختلف داشته باشید، محاسبه این موضوع میتواند دشوار شود، اما همانطور که در زیر خواهید دید، قابل انجام است. چرا زحمت بکشیم؟ وقتی به آن عادت کنید، کاملاً طبیعی است و میتوانید از em برای اندازهگذاری همه چیز، نه فقط متن، استفاده کنید. میتوانید با استفاده از em کل وبسایت را اندازهگذاری کنید که نگهداری را آسان میکند. rems: اینها درست مانند em کار میکنند، با این تفاوت که ۱ rem برابر با اندازه فونت تنظیم شده روی عنصر ریشه سند (یعنی ) است، نه عنصر والد. این امر انجام محاسبات برای محاسبه اندازه فونت را بسیار آسانتر میکند.
اندازه فونت یک عنصر از عنصر والد آن عنصر به ارث میرسد. همه اینها با عنصر ریشه کل سند - - شروع میشود که اندازه فونت استاندارد آن در مرورگرها روی ۱۶ پیکسل تنظیم شده است. هر پاراگراف (یا عنصر دیگری که اندازه متفاوتی توسط مرورگر تعیین نشده باشد) درون عنصر ریشه، اندازه نهایی ۱۶ پیکسل خواهد داشت. عناصر دیگر ممکن است اندازههای پیشفرض متفاوتی داشته باشند. به عنوان مثال، یک عنصر h1 به طور پیشفرض اندازه ۲em دارد، بنابراین اندازه نهایی آن ۳۲ پیکسل خواهد بود.
وقتی شروع به تغییر اندازه فونت عناصر تو در تو میکنید، اوضاع پیچیدهتر میشود. برای مثال، اگر یک عنصر در صفحه خود داشته باشید و اندازه فونت آن را روی ۱.۵ em تنظیم کنید (که اندازه نهایی آن ۲۴ پیکسل محاسبه میشود)، و سپس بخواهید پاراگرافهای داخل عناصر اندازه فونت محاسبهشده ۲۰ پیکسل داشته باشند، از چه مقدار em استفاده خواهید کرد؟
شما باید مقدار em آن را روی 20/24 یا تنظیم کنید. محاسبات میتواند پیچیده باشد، بنابراین باید در مورد نحوه استایلبندی چیزها دقت کنید. بهتر است در صورت امکان از rem استفاده کنید تا همه چیز ساده بماند و در صورت امکان از تنظیم اندازه فونت عناصر نگهدارنده خودداری کنید.
سبک فونت، وزن فونت، تبدیل متن و تزئین متن
CSS چهار ویژگی رایج برای تغییر وزن/تأکید بصری متن ارائه میدهد:
font-style: برای فعال یا غیرفعال کردن حالت ایتالیک متن استفاده میشود. مقادیر ممکن به شرح زیر است (به ندرت از این استفاده خواهید کرد، مگر اینکه به دلایلی بخواهید برخی از استایلهای ایتالیک را غیرفعال کنید):
normal: متن را روی فونت معمولی تنظیم میکند (حالتهای ایتالیک موجود را غیرفعال میکند).
italic: متن را طوری تنظیم میکند که در صورت وجود، از نسخه ایتالیک فونت استفاده کند؛ در غیر این صورت، حالت ایتالیک را با oblique شبیهسازی میکند.
oblique: متن را طوری تنظیم میکند که از یک نسخه شبیهسازی شده از فونت ایتالیک که با کج کردن نسخه معمولی ایجاد میشود، استفاده کند.
font-weight: میزان پررنگ بودن متن را تنظیم میکند. در صورتی که انواع فونت زیادی در دسترس داشته باشید (مانند -light، -normal، -bold، -extrabold، -black و غیره)، این گزینه مقادیر زیادی دارد، اما در واقع به ندرت از هر یک از آنها به جز حالتهای معمولی و پررنگ استفاده خواهید کرد:
normal، bold: وزن فونت معمولی و پررنگ. lighter, bolder: میزان پررنگی عنصر فعلی را یک درجه روشنتر یا سنگینتر از میزان پررنگی عنصر والد آن تنظیم میکند.
100 – 900: مقادیر عددی برای پررنگی که در صورت نیاز، کنترل دقیقتری نسبت به کلمات کلیدی بالا ارائه میدهند.
text-transform: به شما امکان میدهد فونت خود را برای تبدیل تنظیم کنید. مقادیر شامل موارد زیر است:
none: از هرگونه تبدیل جلوگیری میکند.
uppercase: تمام متن را به حروف بزرگ تبدیل میکند.
lowercase: تمام متن را به حروف کوچک تبدیل میکند.
capitalize: تمام کلمات را طوری تغییر میدهد که حرف اول آنها بزرگ باشد.
full-width: تمام گلیفها را طوری تغییر میدهد که درون یک مربع با عرض ثابت نوشته شوند، شبیه به یک فونت monospace، که امکان ترازبندی، مثلاً کاراکترهای لاتین را همراه با گلیفهای زبانهای آسیایی (مانند چینی، ژاپنی، کرهای) فراهم میکند.
text-decoration: تزئینات متن روی فونتها را تنظیم/حذف میکند (عمدتاً از این برای غیرفعال کردن خط زیرین پیشفرض روی لینکها هنگام استایلدهی به آنها استفاده خواهید کرد). مقادیر موجود عبارتند از:
none: هرگونه تزئینات متنی موجود را غیرفعال میکند.
underline: متن را زیر خط میکشد.
overline: به متن یک خط روی متن میدهد.
line-through: یک خط تیره روی متن قرار میدهد.
توجه داشته باشید که اگر میخواهید چندین تزئینات را همزمان اضافه کنید، text-decoration میتواند چندین مقدار را همزمان بپذیرد، به عنوان مثال، . همچنین توجه داشته باشید که text-decoration یک ویژگی مختصر برای text-decoration-line، text-decoration-style و text-decoration-color است. میتوانید از ترکیب مقادیر این ویژگیها برای ایجاد جلوههای جالب استفاده کنید، به عنوان مثال: .
بیایید نگاهی به اضافه کردن چند مورد از این ویژگیها به مثال خود بیندازیم:
شما میتوانید با استفاده از ویژگی text-shadow به متن خود سایه اضافه کنید. این ویژگی حداکثر چهار مقدار میگیرد، همانطور که در مثال زیر نشان داده شده است:
چهار ویژگی به شرح زیر است:
فاصله افقی سایه از متن اصلی - این میتواند اکثر واحدهای طول و اندازه CSS موجود را بگیرد، اما معمولاً از px استفاده میکنید؛ مقادیر مثبت سایه را به سمت راست و مقادیر منفی را به سمت چپ حرکت میدهند. این مقدار باید لحاظ شود.
فاصله عمودی سایه از متن اصلی. این مورد مشابه فاصله افقی رفتار میکند، با این تفاوت که سایه را به بالا/پایین حرکت میدهد، نه به چپ/راست. این مقدار باید لحاظ شود.
شعاع تاری: مقدار بالاتر به این معنی است که سایه به طور گستردهتری پراکنده میشود. اگر این مقدار لحاظ نشود، به طور پیشفرض روی 0 قرار میگیرد، به این معنی که تاری وجود ندارد. این میتواند اکثر واحدهای طول و اندازه CSS موجود را بپذیرد.
رنگ پایه سایه، که میتواند هر واحد رنگ CSS را بپذیرد. اگر لحاظ نشود، به طور پیشفرض روی currentColor قرار میگیرد، یعنی رنگ سایه از ویژگی رنگ عنصر گرفته میشود.
شما میتوانید با قرار دادن چندین مقدار سایه که با کاما از هم جدا شدهاند، چندین سایه را به یک متن اعمال کنید، برای مثال:
با کنار گذاشتن ویژگیهای اولیه فونت، بیایید نگاهی به ویژگیهایی بیندازیم که میتوانیم برای تأثیرگذاری بر طرحبندی متن از آنها استفاده کنیم.
ویژگی text-align برای کنترل نحوه ترازبندی متن در کادر محتوای آن استفاده میشود. مقادیر موجود در زیر فهرست شدهاند. آنها تقریباً به همان روشی که در یک برنامه پردازشگر متن معمولی کار میکنند، عمل میکنند:
left: متن را از چپ تراز میکند.
right: متن را از راست تراز میکند.
center: متن را در مرکز قرار میدهد.
justify: متن را پخش میکند و فواصل بین کلمات را تغییر میدهد تا تمام خطوط متن عرض یکسانی داشته باشند. شما باید از این ویژگی با دقت استفاده کنید - میتواند وحشتناک به نظر برسد، به خصوص وقتی که روی پاراگرافی با کلمات طولانی زیاد اعمال شود. اگر قصد استفاده از این ویژگی را دارید، باید به استفاده از چیز دیگری مانند خط فاصله برای شکستن برخی از کلمات طولانیتر در خطوط نیز فکر کنید.
ویژگی line-height ارتفاع هر خط متن را تعیین میکند. این ویژگی نه تنها میتواند اکثر واحدهای طول و اندازه را بپذیرد، بلکه میتواند یک مقدار بدون واحد نیز بگیرد که به عنوان یک ضریب عمل میکند و عموماً بهترین گزینه در نظر گرفته میشود. با یک مقدار بدون واحد، اندازه فونت ضرب میشود و نتیجه آن ارتفاع خط میشود. متن بدنه معمولاً وقتی خطوط از هم فاصله دارند، زیباتر به نظر میرسد و خواندن آن آسانتر است. ارتفاع خط توصیه شده حدود ۱.۵ تا ۲ (با فاصله دو برابر) است. برای تنظیم خطوط متن روی ۱.۶ برابر ارتفاع فونت، از موارد زیر استفاده میکنیم:
ویژگیهای فاصلهگذاری حروف و فاصلهگذاری کلمات به شما امکان میدهند فاصله بین حروف و کلمات را در متن خود تنظیم کنید. شما اغلب از این ویژگیها استفاده نخواهید کرد، اما ممکن است برای ایجاد ظاهری خاص یا بهبود خوانایی یک فونت خاص و متراکم، از آنها استفاده کنید. آنها میتوانند اکثر واحدهای طولی را بپذیرند.
برای مثال، میتوانیم مقداری فاصلهگذاری کلمات و حروف را در خط اول هر عنصر در نمونه HTML خود اعمال کنیم:
سایر ویژگی هایی که ارزش بررسی دارند
ویژگیهای بالا به شما ایدهای از نحوه شروع استایلدهی به متن در یک صفحه وب میدهند، اما ویژگیهای بسیار بیشتری وجود دارد که میتوانید از آنها استفاده کنید. ما فقط میخواستیم مهمترین آنها را در اینجا پوشش دهیم. پس از اینکه به استفاده از موارد بالا عادت کردید، باید موارد زیر را نیز بررسی کنید:
سبکهای فونت:
font-variant: بین فونتهای کوچک بزرگ و فونتهای معمولی جابجا شوید.
font-kerning: گزینههای تنظیم فاصله فونت را روشن و خاموش کنید.
font-feature-settings: ویژگیهای مختلف فونت OpenType را روشن و خاموش کنید.
font-variant-alternates: استفاده از گلیفهای جایگزین برای یک فونت-فیس مشخص را کنترل کنید.
font-variant-caps: استفاده از گلیفهای جایگزین با حروف بزرگ را کنترل کنید.
font-variant-east-asian: استفاده از گلیفهای جایگزین برای اسکریپتهای آسیای شرقی، مانند ژاپنی و چینی را کنترل کنید.
font-variant-ligatures: کنترل کنید که کدام لیگاتورها و فرمهای متنی در متن استفاده میشوند. 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: مشخص کنید که آیا خطوط درون کلمات شکسته شوند یا خیر. جهت: جهت متن را تعریف کنید. (این به زبان بستگی دارد و معمولاً بهتر است اجازه دهید HTML آن بخش را مدیریت کند زیرا به محتوای متن گره خورده است.)
خط فاصله: روشن و خاموش کردن خط فاصله برای زبانهای پشتیبانی شده.
خط فاصله: شکستن خط را برای زبانهای آسیایی آسانتر یا قویتر کنید.
خط ترازبندی متن-آخرین: نحوه ترازبندی آخرین خط یک بلوک یا یک خط، درست قبل از شکست خط اجباری، را تعریف کنید.
جهتگیری متن: جهتگیری متن را در یک خط تعریف کنید.
سرریز-بستهبندی: مشخص کنید که آیا مرورگر میتواند خطوط درون کلمات را بشکند تا از سرریز جلوگیری شود یا خیر.
حالت نوشتن: تعریف کنید که آیا خطوط متن به صورت افقی یا عمودی قرار گرفتهاند و جهتی که خطوط بعدی در آن جریان دارند.
بسیاری از ویژگیهای فونت را میتوان از طریق ویژگی مختصرنویسی font نیز تنظیم کرد. این ویژگیها به ترتیب زیر نوشته میشوند: font-style، font-variant، font-weight، font-stretch، font-size، line-height و font-family.
در بین تمام این ویژگیها، فقط font-size و font-family هنگام استفاده از ویژگی مختصرنویسی font مورد نیاز هستند.
یک اسلش رو به جلو باید بین ویژگیهای font-size و line-height قرار گیرد.
یک مثال کامل به این شکل خواهد بود:
