گروه مقاله : CSS

تاريخ انتشار : 1394/02/01 - 16:48

كد :211

CSS Fonts

با استفاده از این خاصیت، می توانید برای متون موجود در سند HTML خود استایل دلخواه از قبیل : نوع فونت، برجستگی حروف (bold)، سایز نوشته ها را تعیین کنید.

تفاوت بین فونت های serif و sans-serif :

خاصیت font-family در CSS :

در CSS دو گروه فونت وجود دارد.

generic family : یک گروه مانند “serif” و یا "monospace" هستند.
font family : گروه دوم فونت های خاصی مانند “times new roman” و یا "arial" هستند.

Generic family	Font family	Description
Serif	Times New Roman Georgia	Serif fonts have small lines at the ends on some characters
Sans-serif	Arial Verdana	"Sans" means without - these fonts do not have the lines at the ends of characters
Monospace	Courier New Lucida Console	All monospace characters have the same width

نکته : در صفحه نمایش رایانه، فونت های sans-serif از فونت های serif راحتتر دیده میشوند.

Font-family :

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

بنابراین از فونت های مورد علاقه خودتون شروع کنید و در پایان از generic family ها استفاده کنید تا در صورت عدم پشتیبانی از font family ها، مورد استفاده قرار گیرند.

نکته : اگر نام فونتی که استفاده می کنید بیش از یک کلمه باشد باید آن را داخل علامت "" بگذارید. مانند :”times new roman” در غیر این صورت نیازی به "" نمی باشد.

به مثال زیر توجه نمایید:

<!DOCTYPE html>

<html>

<head>

<style>

p.serif {

font-family: "Times New Roman", Times, serif;

}

p.sansserif {

font-family: Arial, Helvetica, sans-serif;

}

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>

<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>

</html>

Font style :

از این خاصیت معمولا برای مورب کردن (italic) متون استفاده می شود.

مقادیر قابل پذیرش :

Normal : حروف به صورت نرمال نمایش داده می شوند.
Italic : حروف به صورت مورب نمایش داده می شوند.
Oblique: حروف مانند italicبه صورت مورب نمایش داده می شوند ولی این مقدار معمولا پشتیبانی نمی شود.

مثال :

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

font-style: normal;

}

p.italic {

font-style: italic;

}

p.oblique {

font-style: oblique;

}

</style>

</head>

<body>

<p class="normal">This is a paragraph in normal style.</p>

<p class="italic">This is a paragraph in italic style.</p>

<p class="oblique">This is a paragraph in oblique style.</p>

</body>

</html>

Font-size :

این خاصیت سایز حروف را مشخص می کند. شما میتوانید حتی سایز حروف تگ های h1,…h6 و تگ p و... را با استفاده از این خاصیت تغییر دهید.

این خاصیت می تواند به 2 حالت نسبی و یا مطلق تعریف شود :

سایز مطلق:

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

سایز نسبی :

در این حالت سایز حروف متاثر از عناصر اطراف خواهد بود.
کاربر می تواند سایز حروف را در مرورگر خود تغییر دهد.

نکته : اگر شما برای متن داخل یک عنصر سایزی تعیین نکنید، بصورت پیش فرض سایز حروف برابر با (16px=1em) در نظر گرفته می شود.

اگر از px استفاده میکنید می توانید برای بزرگ کردن نوشته ها و در واقع بزرگ کردن کل سند از ابزار zoom استفاده نمایید.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

font-size: 40px;

}

h2 {

font-size: 30px;

}

p {

font-size: 14px;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

استفاده از em در font-size :

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

استفاده از واحد em توسط w3c توصیه می شود.

سایز نوشته ها در حالت عادی بصورت پیش فرض 16px می باشد که هر 16px برابر با 1em می باشد.

از فرمول زیر می توان برای تبدیل px به em استفاده نمود.

Px/16 = em

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

font-size: 2.5em; /* 40px/16=2.5em */

}

h2 {

font-size: 1.875em; /* 30px/16=1.875em */

}

p {

font-size: 0.875em; /* 14px/16=0.875em */

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>

<p>Specifying the font-size in em allows all major browsers to resize the text.

Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>

</html>

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

نکته : برای حل این مشکل (نمایش یکسان سایز حروف در تمام مرورگر ها) پیشنهاد می شود از واحد em و % به صورت همزمان استفاده شود.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-size: 100%;

}

h1 {

font-size: 2.5em;

}

h2 {

font-size: 1.875em;

}

p {

font-size: 0.875em;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>

<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>

</html>

همه ی خواص مربوط به فونت در css :

Property	Description
font	Sets all the font properties in one declaration
font-family	Specifies the font family for text
font-size	Specifies the font size of text
font-style	Specifies the font style for text
font-variant	Specifies whether or not a text should be displayed in a small-caps font
font-weight	Specifies the weight of a font