آموزش CSS
متن (text) یکی از مهمترین المان‌های ساختاری اسناد وب است و استایل‌دهی به متن شامل مواردی مانند تعیین نوع و سایز فونت، رنگ، استایل، ترازبندی و ویژگی‌هایی از این دست است. در این درس در مورد یک پراپرتی بسیار مهم با نام font-family صحبت می‌کنیم که برای تعیین فونت متن عناصر وب کاربرد دارد.
قبل از اینکه به نحوه‌ی تعیین فونت متن عناصر در CSS بپردازیم، اجازه دهید اول ببینیم وب از چه فرمت‌هایی از فونت‌ها پشتیبانی می‌کند. لیست این فونت‌ها را می‌توانید به همراه یک توضیح مختصر و مرورگرهای پشتیبانی‌کننده از هر فرمت در جدول زیر ببینید.
| فرمت فونت | توضیح | مرورگر |
|---|---|---|
| Embedded Open Type (EOT) | یک فرمت فشرده از فونت‌های Open Type که برای جاسازی در استایل‌شیت‌ها ساخته شده‌اند. | IE |
| True Type (TTF) | فرمت فونت استاندارد در سیستم‌عامل‌های مکینتاش و ویندوز | IE, Firefox, Chrome, Safari, Opera |
| Open Type (OTF) | فرمت فونت ساخته شده توسط مایکروسافت بر اساس True Type | IE, Firefox, Chrome, Safari, Opera |
| Scalable Vector Graphic (SVG) | فرمت فوت مبتنی بر XML برای توصیف گرافیک‌های مقیاس‌پذیر و برداری | Safari |
| Web Open Font Format (WOFF) | فرمت فونت مورد توصیه‌ی W3C به همراه فشردگی و متادیتای اضافی | IE, Firefox, Chrome, Safari, Opera |
| WOFF2 | نسخه‌ی بهبود یافته‌ی WOFF | IE, Firefox, Chrome, Safari, Opera |
از بین این فرمت‌ها، woff2 برای استفاده در وب گزینه‌ی مناسب‌تری به حساب می‌آید و از وضعیت پشتیبانی خوبی هم برخوردار است.
در CSS برای تعیین فونت متن یک عنصر می‌توانیم نام یک فونت مانند arial و یا نام یک خانواده از فونت‌ها مانند sans-serif را وارد کنیم تا مرورگر از بین فونت‌های آن خانواده یکی را برگزیند. پنج خانواده یا گروه جنریک برای فونت‌ها در نظر گرفته شده که عبارتند از:
اگر دقت کرده باشید در اسناد چاپی که به زبان انگلیسی هستند، برای تیترها از فونت‌های sans-serif و برای بدنه از فونت‌های serif استفاده می‌شود. اما در وب و به طور کلی، برای متون انگلیسی که قرار است در نمایشگرها نمایش داده شوند، از فونت‌های sans-serif هم برای تیترها و هم برای بدنه استفاده می‌شود و کاربرد فونت‌های serif به مواردی مثل افکت‌های متنی محدود می‌شود.
وقتی فونتی را برای یک عنصر تعیین می‌کنیم، متن آن عنصر تنها در صورتی با استفاده از آن فونت نمایش داده خواهد شد که فونت مورد نظر روی سیستم کاربر وجود داشته باشد. عملاً راهی برای آگاهی از فونت‌های موجود روی سیستم کاربران وجود ندارد اما تعداد کمی از فونت‌ها هستند که می‌توانیم از وجود آنها روی هر سیستم کامپیوتری مطمئن باشیم. این فونت‌ها را فونت‌های امن وب (web safe fonts) می‌نامند. لیست این فونت‌ها با به‌روز شدن سیستم‌عامل‌ها می‌تواند تغییر کند اما لااقل برای الان (اواسط ۲۰۲۴) این لیست شامل فونت‌های زیر است.
| فونت | خانواده فونت | توضیح |
|---|---|---|
| Arial | sans-serif | از این فونت به طور گسترده‌ای استفاده می‌شود و البته خیلی‌ها Helvetica را یک جایگزین مناسب‌تر برای این فونت می‌دانند. |
| Courier New | monospace | برخی سیستم‌عامل‌ها شامل یک نسخه‌ی جایگزین قدیمی‌تر با نام Courier هستند. بهتر است از هر دوی این فونت‌ها در کنار هم استفاده کنیم و اولویت را به Courier New بدهیم. |
| Georgia | ||
| Times New Roman | serif | برخی سیستم‌عامل‌ها شامل یک نسخه‌ی جایگزین قدیمی‌تر با نام Times هستند. بهتر است از هر دوی این فونت‌ها در کنار هم استفاده کنیم و اولویت را به Times New Roman بدهیم. |
| Trebuchet MS | sans-serif | توجه داشته باشید که این فونت در سیستم‌عامل‌های موبایلی در دسترس نیست. |
| Verdana | sans-serif |
خوب البته این فونت‌ها برای متون فارسی چندان مناسب نیستند اما از وجود هیچ فونت فارسی روی هیچ سیستم‌عاملی نمی‌توانیم مطمئن باشیم. با این حال، در ادامه، خواهیم دید که چطور می‌توانیم با استفاده از یک at-rule به نام @font-face از فونت دلخواهمان (فارغ از اینکه آن فونت روی سیستم کاربر هست یا خیر) استفاده کنیم.
اکثر مرورگرهای اصلی از فونت Times New Roman به عنوان فونت پیش‌فرض متون استفاده می‌کنند. اما با استفاده از پراپرتی font-family می‌توانیم از فونت دلخواهمان برای متن هر عنصر استفاده کنیم. پراپرتی font-family یک پراپرتی inherited یا پشتیبانی‌کننده از وراثت است و بنابراین، مقدار این پراپرتی از والد به فرزند به ارث می‌رسد. معمولاً روال تعیین فونت عناصر به این صورت است که فونت اصلی صفحه را برای عنصر body تعیین می‌کنیم و سپس، برای هر عنصر دیگری که به فونت دیگری نیاز داشته باشد، این مقدار inherited را لغو کرده و فونت مورد نظر را برای آن عنصر تعیین می‌کنیم.
مقدار پراپرتی font-family می‌تواند نام یک فونت مانند Arial یا Verdana باشد. البته معمول‌تر این است که بیش از یک فونت را به عنوان مقدار این پراپرتی تعیین کنیم و آنها را با کاما از هم جدا کنیم. با این کار، مرورگر اولین فونتی را که در سییستم کاربر موجود باشد، برای متن در نظر می‌گیرد.
در اغلب موارد، بهتر است ترتیب فونت‌ها به گونه‌ای باشد که از فونت‌های خاص به سمت فونت‌های عمومی‌تر و در دسترس‌تر حرکت کنیم. به علاوه، بهتر است آخرین گزینه‌ی لیست یک خانواده از فونت‌ها مانند serif یا monospace باشد. مثال زیر را ببینید.
CSS
body{
font-family: "Helvetica Neue", Arial, sans-serif;
}در کد بالا، فونت اصلی صفحه با استفاده از پراپرتی font-family برای عنصر body تعیین شده است. این فونت به همه‌ی فرزندان body نیز به ارث می‌رسد. همانطور که می‌بینید، آخرین گزینه‌ی لیست، یک خانواده‌ی جنریک از فونت‌ها با نام sans-serif است.
در CSS3 یک at-rule به نام @font-face معرفی شد که امکان استفاده از فونت‌های دلخواه را برای ما فراهم می‌کند. روش کار این قاعده به این صورت است که بدون اینکه کاربر متوجه شود، فونت مورد نظر ما را روی سیستم او دانلود می‌کند و از آن فونت برای نمایش متن عنصر مورد نظر استفاده می‌کند. مثال زیر را ببینید.
CSS
@font-face{
font-family: SomeWebFont;
src: url('/some-font.woff2') format('woff2');
}
body{
font-family: SomeWebFont, Arial, sans-serif;
}کد بالا سیسنتکس و نحوه‌ی استفاده از @font-face را نشان می‌دهد. با استفاده از پراپرتی font-family نام دلخواهی را برای فونت مورد نظرمان تعیین می‌کنیم و با استفاده از پراپرتی src آدرس و فرمت فونت را تعیین می‌کنیم. سپس، می‌توانیم برای هر عنصری که مایلیم از این فونت استفاده کند، نام فونت را به پراپرتی font-family اختصاص دهیم.