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

          برنامه نویس 
            بازدید : 39
          چهارشنبه 26 تیر 1398
           نظرات (0)
        

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

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

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

خصوصیت text-overflow

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!DOCTYPEhtml>
<html>
<head>
<style>
p.test1 {
  white-space:nowrap;
  width:200px;
  border:1pxsolid#000000;
  overflow:hidden;
  text-overflow:clip;
}
 
p.test2 {
  white-space:nowrap;
  width:200px;
  border:1pxsolid#000000;
  overflow:hidden;
  text-overflow:ellipsis;
}
 
div.a {
  white-space:nowrap;
  width:100px;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1pxsolid#000000;
}
 
div.a:hover {
  overflow:visible;
  border:none;
}
</style>
</head>
<body>
 
<h1>The text-overflow Property</h1>
<p>The following two paragraphs containsalongtext that will notfit inthe box.</p>
 
<h2>text-overflow:clip:</h2>
<pclass="test1">Thisissome longtext that will notfit inthe box</p>
 
<h2>text-overflow:ellipsis:</h2>
<pclass="test2">Thisissome longtext that will notfit inthe box</p>
 
<h2>text-overflow:ellipsis:</h2>
<p>موسخودراروینوشتهیزیربیاورید</p>
<div class="a">Thisissome longtext that will notfit inthe box.</div>
 
</body>
</html>

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPEhtml>
<html>
<head>
<style>
div.test {
  white-space:nowrap;
  width:200px;
  overflow:hidden;
  border:1pxsolid#000000;
}
 
div.test:hover {
  overflow:visible;
}
</style>
</head>
<body>
 
<p>Hover over the two divs below,tosee the entire text.</p>
<div class="test"style="text-overflow:ellipsis;">Thisissome longtext that will notfit inthe box</div>
<br>
<div class="test"style="text-overflow:clip;">Thisissome longtext that will notfit inthe box</div>
 
</body>
</html>

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

خصوصیت word-wrap

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPEhtml>
<html>
<head>
<style>
p.test2 {
  width:11em;
  border:1pxsolid#000000;
  word-wrap:break-word;
}
 
p.test {
  width:11em;
  border:1pxsolid#000000;
}
</style>
</head>
<body>
 
<h1>The word-wrap Property</h1>
 
<pclass="test">Thisparagraph containsavery longword:thisisaveryveryveryveryveryverylongword.The longwordwill breakandwrap tothe next line.</p>
 
<pclass="test2">Thisparagraph containsavery longword:thisisaveryveryveryveryveryverylongword.The longwordwill breakandwrap tothe next line.</p>
 
</body>
</html>

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

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

خصوصیت word-break

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPEhtml>
<html>
<head>
<style>
p.test1 {
  width:140px;
  border:1pxsolid#000000;
  word-break:keep-all;
}
 
p.test2 {
  width:140px;
  border:1pxsolid#000000;
  word-break:break-all;
}
</style>
</head>
<body>
 
<h1>The word-breakProperty</h1>
 
<pclass="test1">Thisparagraph contains some text.Thisline will-break-at-hyphens.</p>
 
<pclass="test2">Thisparagraph contains some text.The lines will breakat any character.</p>
 
<pdir='rtl'><b>هشدار:</b>خصوصیتword-breakدرمرورگرOpera12ونسخههایقبلترازآنپشتیبانینمیشود.</p>
 
</body>
</html>

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

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

خصوصیت writing-mode

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPEhtml>
<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>
 
<pclass="test1">Some text with defaultwriting-mode.</p>
 
<p>Some text withaspan element witha<span class="test2">vertical-rl</span>writing-mode.</p>
 
<pclass="test2">Some text with writing-mode:vertical-rl.</p>
<br><br>
<pclass="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 استفاده کنید).

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

 



1
2
3
4
5
6
7
8

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

منبع: روکسو

ارسال نظر برای این مطلب