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

فونت ها (Fonts)

شاید در دنیای وب انگلیسی نیاز به فونت های شخصی و انتخابی یک مسئله ی سلیقه ای باشد که توسعه دهندگان برای زیباتر کردن صفحه از آن استفاده می کنند اما اگر بخواهم با شما صادق باشم باید بگویم امروزه این مسئله در دنیای وب فارسی کاملا متفاوت است ...!

فونت های پیش فرضی که در مرورگر های وب وجود دارند شاید بهترین فونت ها نباشند اما فونت های بدی هم نیستند؛ این مسئله تا زمانی صادق است که ما بخواهیم انگلیسی بنویسیم چرا که این فونت ها برای زبان انگلیسی طراحی شده اند نه زبان فارسی! به همین دلیل است که اگر در دنیای وب فارسی از فونت های شخصی و custom استفاده نکنید ظاهر بسیار زشتی به وب سایت خود می دهید. با این توصیفات انتخاب فونت های غیر پیش فرض در دنیای وب فارسی یک «باید» محسوب می شود، نه یک «انتخاب»!

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

در زبان CSS دو نوع فونت داریم:

font family: به معنی «خانواده ی فونت» است. این نوع فونت ها یک خانواده ی خاصی از فونت ها هستند؛ مانند فونت های Times New Roman و Arial.
generic family: به معنی «فونت عمومی» است. این نوع فونت ها گروه هایی از font family هستند که ظاهرشان بسیار به هم شبیه است؛ مانند فونت های Serif و Monospace

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

تعیین فونت

برای تعیین فونت دلخواه و شخصی صفحات وب خود باید از دستور font-family استفاده کنید.

هنگامی که فونت هایی را انتخاب می کنید و آن ها را به font-family میدهید بهتر است چند فونت پیش فرض را نیز تعیین کنید. دلیل این کار این است که اگر هنگامی سایت شما دچار مشکل شد (به طور مثال فایل font به طور اتفاقی و ناخواسته از سرور شما حذف شد و یا این فایل را اشتباها آدرس دهی کرده باشید و ...) سایت به هم نریزد و در عوض متن را در قالب فونت های پیش فرض نمایش دهد.

ترتیب انتخاب فونت به این شکل است که ابتدا فونت های مورد علاقه تان را به font-family بدهید، سپس فونت های پیش فرض را و در آخر آن ها را با علامت ویرگول انگلیسی از هم جدا کنید. این ترتیب برای دستور font-family اهمیت دارد به طوری که سعی می کند ابتدا فونت هایی را بارگذاری و اجرا کند که اول ذکر شده باشند.

نکته: اگر نام یک font family بیشتر از یک کلمه باشد (مثل Times New Roman) باید در علامت Quotation (علامت های " ") قرار بگیرد.

مثال زیر این موضوع را به خوبی نشان می دهد:

<!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>

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

در این مثال جمله ی اول را با فونت Times New Roman و جمله ی دوم را با فونت Arial نوشته ایم.

بگذارید یک مثال فارسی را هم ببینیم:

<!DOCTYPE html>
<html>
<head>
<style>
  
  /* font-Tanha */
  @font-face {
      font-family: Tanha;
      src:url('http://fonts.codearena.ir/rastikerdar/tanha/tanha.eot');
      font-weight: normal;
    }  
  
p.tanha {
  font-family: "Tanha", Times, serif;
}

</style>
</head>
<body dir='rtl'>

<h1>فونت فارسی CSS به صورت پیش فرض</h1>
  
<p class="tanha">این متن فارسی با فونت «تنها» نوشته شده است</p>


</body>
</html>

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

در این کد از یک فونت دلخواه و سفارشی به نام «تنها» استفاده کرده ایم. همانطور که می بینید برای انتخاب کردن یک فونت که پیش فرض مرورگر نباشد باید ابتدا آن را اضافه کنید. برای اضافه کردن فونت ها از قالب زیر استفاده می کنیم:

@font-face {
    font-family: Tanha;
    src:url('http://roxo.ir/rastikerdar/tanha/tanha.eot');
    font-weight: normal;
}

ابتدا دستور font-face را می نویسید و سپس براکت ها را برایش باز می کنید. سپس یک نام برای فونت خود انتخاب می کنید و آن را به font-family می دهید. توجه کنید که این نام کاملا دلخواه شماست و لازم نیست حتما با نام فونت یکسان باشد. سپس باید آدرس فایل فونت را به ()src: url بدهید که ما اینجا از سرویس های آنلاین انتخاب فونت استفاده کرده ایم. اگر شما فایل فونت را دارید می توانید آن را روی سرور خود قرار داده و سپس به ()src: url آدرس فایل روی سرور خود را بدهید. در آخر می توانید با استفاده از دستور font-weight میزان چاقی متن را انتخاب کنید که اینجا برایش normal را قرار داده ایم.

بقیه ی ماجرا هم که مشخص است!

استایل فونت

منظور از استایل فونت موارد زیر هستند:

normal: متن به صورت عادی نمایش داده می شود.
italic: متن به صورت مورب نمایش داده می شود.
oblique: متن باز هم به صورت مورب نمایش داده می شود

نکته: تفاوت خاصی بین oblique و italic وجود ندارد به جز آنکه oblique در مرورگرهای محدودی پشتیبانی می شود.

برای تعیین استایل فونت ها از دستور font-style استفاده می کنیم:

<!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>

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

اندازه ی Font

اندازه یا size فونت ها با دستور font-size تعیین می شوند. در نظر داشته باشید که نباید از font-size برای تغییر دادن ظاهر متن عادی استفاده کنید تا شبیه heading شود و سپس از آن به جای heading استفاده کنید! استفاده از heading (تگ های h1 و h2 و h3 و ...) ها برای موتور های جست و جو و ساختار صفحه ی شما معنی خاصی دارد و فقط پر رنگ کردن یک عبارت نمی تواند جای استفاده از این تگ ها را بگیرد.

اندازه ی فونت ها می توانند مطلق یا نسبی باشند.

در مقادیر مطلق:

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

در مقادیر نسبی:

اندازه ی متن نسبت به عناصر دور و بر آن تعیین می شود
به کاربران اجازه میدهد که اندازه ی فونت را تغییر دهند

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

بیایید ابتدا اندازه ی فونت ها را با پیکسل تعیین کنیم:

<!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>

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

کار با پیکسل ها راحت است اما بیایید حالا از 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>

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

مثال بالا دقیقا مانند مثال قبلی آن است با این تفاوت که زمانی که از em استفاده کنیم به مرورگر ها اجازه می دهیم اندازه ی متن را تغییر دهند و بزرگتر کنند.

همچنین em توسط W3C تایید و پیشنهاد می شود اما متاسفانه در مرورگر Internet Explorer به خوبی کار نمی کند و در مواقع مختلف متن را بیش از حد کوچک یا بزرگ می کند. راه حلی که برای این مشکل ارائه شده استفاده ی ترکیبی از درصد و 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>

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

حالا کد ما به خوبی و در تمام مرورگر ها کار می کند.

وزن Font

وزن فونت ها با دستور font-weight مشخص می شود. مشخص کردن وزن فونت یعنی مشخص کردن میزان چاقی آن فونت. شما می توانید این خصوصیت را با مقادیر زیر تعیین کنید:

مقادیر حرفی از پیش تعریف شده مانند normal و lighter و bold و ...
مقادیر عددی

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

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

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

تعیین اندازه ی Font ها به صورت واکنش گرا

شما می توانید اندازه ی فونت هایتان را در واحد vw تعیین کنید که مخفف viewport width و به معنی «عرض viewport» است. در قسمت های قبلی توضیح دادیم که viewport به معنی قسمتی از صفحه است که مخاطب آن را می بیند.

اگر چنین کاری انجام دهیم، اندازه ی مرورگر بر اساس اندازه ی پنجره ی مرورگر تغییر می کند:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

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

در خروجی کد بالا اندازه ی مرورگر خود یا اندازه ی قسمت راست JSBin را کوچک و بزرگ کنید تا تغییر سایز فونت را ببینید.

نکته: هر vw معادل با 1 درصد از کل viewport است. به طور مثال اگر viewport ما 50 سانتی متر باشد 1vw برابر با 0.5 سانتی متر خواهد بود.

دستور font-variant

این دستور متن شما را با فونت small-caps می نویسد. small-caps از دو قسمت small و caps (اشاره به capital) تشکیل شده است. به عبارت دیگر متونی که با small-caps نوشته شوند با حروف بزرگ انگلیسی (capital letter) نوشته می شوند اما اندازه ی این حروف بزرگ از نظر فیزیکی کوچک است.

برای درک بهتر به مثال زیر نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>

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

اگر به دو خط متن دقت فراوان بکنید متوجه تفاوتشان خواهید شد.

امیدوارم از این قسمت نیز لذت برده باشید.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

21 اردیبهشت 1399

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