آموزش ویژگی font-family در CSS | آموزش کامل + نمونه کد

قبلی بعدی

ویژگی font-family در CSS

با ویژگی font-family، می توان فونت متن را تغییر داد.

font-family: verdana;

font-family: fantasy;

نکته: اگر در نام فونت، فاصله (space) وجود داشته باشد، باید آن نام داخل کوتیشن قرار بگیرد. مثل :"Times New Roman".

font-family: "Times New Roman";

نکته: برای استفاده از هر فونتی، باید آن فونت در مرورگر کاربران شما نصب باشد.

به صورت کلی سه روش برای استفاده از فونت ها وجود دارد:

استفاده از فونت های امن وب (web safe font)
نصب و استفاده فونت شخصی با دستور font-face
نصب و استفاده از فونت های شخصی به کمک شبکه های توزیع محتوا فونت (Font CDN) مانند گوگل فونت (این روش نیز از دستور font-face استفاده می کند.)

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

به صورت پیشفرض در مرورگرها فونت هایی وجود دارد، که به آنها فونت های امن وب (web safe font) گفته می شود.

فونت های امن وب شامل:

Arial
Courier New
Georgia
Impact
Tahoma
Time New Roman
Verdana

font-family: fantasy;

نکته: متاسفانه فونت های امن وب برای زبان فارسی ارائه نشده اند. برای نصب و استفاده از فونت های فارسی باید از دستور font-face استفاده کنیم.

فونت جایگزین (font-fallback) در CSS

نکته: هیچ فونت کاملاً ایمنی در وب وجود ندارد. همیشه این احتمال وجود دارد که فونت نصب نشده باشد یا پشتیبانی نشود یا ... .

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

فونت جایگزین در ادامه همان فونت اصلی نوشته می شود و با کاما (,) از فونت اصلی جدا می شود.

نکته: شما می توانید به تعداد نامحدود فونت جایگزین استفاده کنید.

font-family: Arila, Fantasy, "Times New Roman";

فونت دلخواه در CSS با دستور font-face

برای استفاده از فونت دلخواه، باید با دستور font-face آن فونت را نصب و از آن استفاده کنیم.

1. قبل از هرکاری باید فونت مورد نظر خود را دانلود و در کنار سند HTML قرار دهیم.

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

نکته: فونت ها در سطح وب با فرمت های مختلفی وجود دارند. توصیه می شود از فرمت های TTF - OTF - WOFF - WOFF2 استفاده کنید.

2. در کدهای CSS (داخلی یا خارجی) خود از دستور @font-face استفاده کنید. با این کار فونت خود را به سند html می شناسانید و می توانید از آن استفاده کنید.

@font-face {
    font-family: "yekan-light"; /* نام دلخواه */
    src: url("assets/yekan.woff2"); /*  آدرس دهی به فایل فونت */
}

همانطور که در نمونه کد بالا می بینید، دستور font-face شامل دو ویژگی اصلی است.

font-family: برای فونت دلخواه خود یک نام دلخواه می گذاریم تا بتوانیم آن را فراخوانی و استفاده کنیم.
src: با کمک url()، به آدرس فایل فونت خود آدرس دهی می کنیم.

نکته: برای اطلاعات بیشتر، درباره آدرس دهی به آموزش آدرس دهی مراجعه کنید.

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

h2 {
    font-family: "yekan-light"; /* فراخوانی فونت با نام دلخواه */
}

در نمونه کد زیر به صورت کامل مراحل را انجام داده ایم.

@font-face {
    font-family: "yekan"; /* نام دلخواه */
    src: url("assets/yekan.ttf"); /*  آدرس دهی به فایل فونت */
}
h2 {
    font-family: "yekan", "arial"; /* فراخوانی فونت با نام دلخواه */
}

دستور font-face می تواند ویژگی های زیر را نیز قبول کند.

font-stretch: نوع کشیدگی فایل فونت را مشخص می کند.
font-style: نوع سبک فایل فونت را مشخص می کند.
font-weight: مقدار وزن فایل فونت را مشخص می کند.
unicode-range: دامنه کارکتر های موجود در فایل فونت را مشخص می کند.

نکته: ویژگی های بالا زمانی استفاده می شود که شما بخواهید از یک فونت (مثلا یکان) با سه وزن متفاوت استفاده کنید. در این زمان کافی است شما از 3 دستور font-face با font-family یکسان استفاده و فقط مقدار font-weight متفاوت باشد. در نهایت فقط با استفاده از نام فونت و font-weight مربوطه، شما به آن فونت مخصوص دسترسی پیدا می کنید.

@font-face {
    font-family: "yekan";
    src: url("assets/yekan-400.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "yekan";
    src: url("assets/yekan-700.ttf");
    font-weight: 700;
}
h2 {
    font-family: "yekan", "arial";
    font-weight: 700;
}
p {
    font-family: "yekan", "arial";
    font-weight: 400;
}

استفاده از گوگل فونت در CSS با دستور font-face

گوگل فونت، یک شبکه توزیع محتوا (CDN) شامل مجموعه ای از فونت های فارسی، انگلیسی و ... است.

نکته: شبکه توزیع محتوا (CDN)، سرورهایی هستند که برای ارائه محتوا دیجیتال بهینه سازی شده اند. به طور مثال گوگل فونت به ارائه فونت می پردازد. زمانی که از این شبکه ها استفاده می کنید دیگر نیازی نیست فایل مربوطه (مثلا فونت) را دانلود و خودتان آن را میزبانی کنید. بلکه از آدرس فایل (آدرس فونت) در داخل این شبکه استفاده می کنید.

برای استفاده از گوگل فونت:

به سایت www.fonts.google.com مراجعه کنید.
از منوی کناری، زبان خود را انتخاب و به دنبال فونت مورد نظر خورد بگردید.
با انتخاب فونت مورد نظر و کلیک بر روی get font و در ادامه embed code به صفحه دریافت کد وارد می شود. از تب web می توانید کدها را دریافت و در پروژه خود استفاده کنید. (امکان دارد این مرحله یا نام ها توسط گوگل تغییر پیدا کند.)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&display=swap" rel="stylesheet">
<!--
اتصال به استایل خارجی شامل دستور 
font-face
است
-->

<style>
    .handjet-700 { /* نامی دلخواه بگزارید */
          font-family: "Handjet", sans-serif;
          font-optical-sizing: auto;
          font-weight: 700; /* وزن فونت را انتخاب کنید */
          /* font-weight: 100|200|300|400|500|600|700|800|900 */
          font-style: normal;
          font-variation-settings:
            "ELGR" 1,
            "ELSH" 2;
    }
</style>

نکته: اگر به کدها توجه کنید، می بینید که یک تگ link به استایل خارجی (External CSS) آدرس دهی شده است. آن استایل خارجی شامل دستور font-face است که به آدرس فونت مربوطه اشاره کرده است. در تگ style، فونت مربوطه را به یک کلاس اعمال شده است. شما با استفاده از نام آن کلاس در هر المانی می توانید از فونت مربوطه استفاده کنید.

خلاصه درس

در این درس با ویژگی font-family در CSS:

فونت ها امن وب
فونت جایگزین (font-fallback)
فونت دلخواه با دستور font-face
استفاده از گوگل فونت با دستور font-face

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی