افکت های متن در css و انواع آن ها + معرفی فونت های css

افکت های متن در css

در زبان CSS می توانیم به متون افکت های خاصی اضافه کنیم. در این مقاله قصد داریم افکت های متن در css را مورد بررسی قرار دهیم:

text-overflow
word-wrap
word-break
writing-mode

خصوصیت text-overflow

خصوصیت text-overflow کار مهمی را بر عهده دارد؛ برخی اوقات محتوای متنی ما از کادر یا نگه دارنده ای که برایش تعیین شده، فراتر می رود و دیگر در آن جا نمی شود. در چنین حالتی text-overflow می تواند تعیین کند که مرورگر با محتوای اضافی چه کار کند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.a {
  white-space: nowrap; 
  width: 100px; 
  overflow: hidden;
  text-overflow:ellipsis;
  border: 1px solid #000000;
}

div.a:hover {
  overflow: visible;
  border: none;
}
</style>
</head>
<body>

<h1>The text-overflow Property</h1>
<p>The following two paragraphs contains a long text that will not fit in the box.</p>

<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p>موس خود را روی نوشته ی زیر بیاورید</p>
<div class="a">This is some long text that will not fit in the box.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ما با استفاده از قابلیت hover مورد آخر را تغییر داده ایم. به صورتی که با قرار گرفتن موس روی آن، نوشته کاملا دیده می شود. این کار را می توان در حالت های مختلف انجام داد:

<!DOCTYPE html>
<html>
<head>
<style> 
div.test {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden; 
  border: 1px solid #000000;
}

div.test:hover {
  overflow: visible;
}
</style>
</head>
<body>

<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت word-wrap

خصوصیت word-wrap به کلمات طولانی تر اجازه میدهد که شکسته شوند و به خط بعد بروند، چرا که در حالت عادی اگر یک کلمه بیش از حد طولانی باشد و در آخر خط قرار بگیرد، از نگه دارنده ی خود بیرون می زند. به این مثال توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test2 {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}

p.test {
  width: 11em; 
  border: 1px solid #000000;
}
</style>
</head>
<body>

<h1>The word-wrap Property</h1>

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

<p class="test2"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

تفاوت هر دو در مثال بالا واضح است.

خصوصیت word-break

این خصوصیت مشخص می کند که اگر جایی قرار است خط شکسته شود و کلمات به خط بعدی بروند، از کجا و چطور شکسته شوند. در مثال زیر دو جفت نگه دارنده و متن جدا داریم که مورد اول فقط زمانی که به خط فاصله (-) برسد و مورد دوم هر زمان و هر جایی که به انتهای خط برسد، شکسته می شود:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
}
</style>
</head>
<body>

<h1>The word-break Property</h1>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

<p dir='rtl'><b>هشدار:</b>خصوصیت word-break در مرورگر Opera 12 و نسخه های قبل تر از آن پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

هشدار: خصوصیت word-break در مرورگر Opera 12 و نسخه های قبل تر از آن پشتیبانی نمی شود.

خصوصیت writing-mode

خصوصیت writing-mode مشخص می کند که نوشته ها عمودی یا افقی نوشته شوند. در مثال زیر هر دوی این حالت بررسی شده اند:

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

p.test3 {
  writing-mode: vertical-rl; 
}
</style>
</head>
<body>
<h1>The writing-mode Property</h1>

<p class="test1">Some text with default writing-mode.</p>

<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>

<p class="test2">Some text with writing-mode: vertical-rl.</p>
<br><br>
<p class="test3">این قابلیت در متون فارسی یا انگلیسی تفاوتی ایجاد نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

فونت های در CSS

قبلا و در قسمت های قبلی به تفصیل در مورد فونت ها صحبت کرده ایم. بنابراین از تکرار مکررات پرهیز می کنیم و به نکاتی میپردازیم که قبلا ذکر نشده اند. انواع فونت های موجود در دنیای وب در اشکال زیر هستند:

فونت های (TrueType Fonts (TTF:
TrueType یک استاندارد فونت بود که در سال 1980 توسط Apple و Microsoft ارائه شد و رایج ترین نوع فونت در سیستم عامل های Mac OS و Windows می باشد.

فونت های (OpenType Fonts (OTF:
OpenType یک فرمت دیگر برای فونت های مقیاس پذیر کامپیوتری است که بر پایه ی TrueType ساخته شد و صاحب آن Microsoft می باشد. این نوع از فونت ها نیز از رایج ترین فونت های دنیای کامپیوترها هستند.

فونت های (Web Open Font Format (WOFF:
WOFF فرمتی است که در صفحات وب استفاده می شود. این فرمت که در سال 2009 ارائه شد، حالا مورد تایید W3C نیز می باشد. در واقع WOFF همان OpenType یا TrueType است که فشرده تر شده و دارای اطلاعات اضافی نیز می باشد. هدف آن نیز ارائه و توزیع فونت ها از سرور به سمت کاربران است، در شرایطی که پهنای باند کمی وجود دارد.

فونت های (Web Open Font Format (WOFF 2.0:
این دسته از فونت ها فشرده سازی بهتری نسبت به WOFF 1.0 دارند.

فونت ها یا اشکال SVG:
فونت های SVG در واقع glyph هستند. SVG 1.1 ماژولی دارد که اجازه می دهد در اشکال مختلف فونت هایی را نیز تعریف کنیم. همانطور که می دانید قوانین CSS نیز بر SVG ها اعمال می شوند بنابراین می توانید از دستور font-face@ نیز استفاده کنید.

فونت های (Embedded OpenType Fonts (EOT:
این فونت ها در واقع همان OpenType هستند که توسط Microsoft به عنوان فونت های embedded در صفحات وب استفاده می شوند.

وضعیت پشتیبانی

پشتیبانی مرورگرهای مختلف از این نوع فونت ها به صورت زیر است:

فرمت فونت	Edge	کروم	فایرفاکس	سافاری	اپرا
TTF/OTF	*9.0	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	پشتیبانی نمی‌شود	36.0	*35.0	پشتیبانی نمی‌شود	26.0
SVG	پشتیبانی نمی‌شود	4.0	پشتیبانی نمی‌شود	3.2	9.0
EOT	6.0	پشتیبانی نمی‌شود	پشتیبانی نمی‌شود	پشتیبانی نمی‌شود	پشتیبانی نمی‌شود

* این فرمت تنها زمانی کار می کند که روی "installable" تنظیم شده باشد.

* این فرمت به صورت پیش فرض پشتیبانی نمی شود اما می توانید آن را فعال کنید (باید flag را روی "true" بگذارید تا از WOFF2 استفاده کنید).

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

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

افکت های متنی و فونت ها در زبان CSS

افکت های متن در css

خصوصیت text-overflow

خصوصیت word-wrap

خصوصیت word-break

خصوصیت writing-mode

فونت های در CSS

وضعیت پشتیبانی