فونت وب CSS
- صفحه قبلی تاثیر نوشتار CSS
- صفحه بعدی تغییرات 2D CSS
قاعده @font-face CSS
فونت‌های وب به کارگردانان وب اجازه می‌دهند که از فونت‌هایی استفاده کنند که روی کامپیوتر کاربر نصب نشده‌اند.
وقتی که فونتی را که می‌خواهید استفاده کنید پیدا کردید یا خریداری کردید، کافی است فایل فونت را در سرور وب خود قرار دهید، که به صورت خودکار در زمان نیاز به کاربران دانلود خواهد شد.
فونت‌های “مخصوص به خود” شما در CSS @font-face در قوانین تعریف شده‌اند.
فرمت‌های مختلف فونت
فونت TrueType (TTF)
TrueType استانداردی برای فونت‌ها است که توسط Apple و Microsoft در اواخر دهه 1980 توسعه یافت. TrueType فرمت معمولی‌ترین فونت در سیستم‌عامل‌های Mac OS و Microsoft Windows است.
فونت OpenType (OTF)
OpenType فرمتی برای فونت‌های قابل انعطاف کامپیوتری است. این فرمت بر اساس TrueType ساخته شده و یک نام تجاری ثبت شده توسط Microsoft است. امروزه، فونت‌های OpenType در پلتفرم‌های کامپیوتری اصلی به طور گسترده استفاده می‌شوند.
فرمت فونت وب آزاد (WOFF)
WOFF فرمتی برای فونت‌های وب است. این فرمت در سال 2009 توسعه یافت و اکنون به عنوان استاندارد پیشنهادی W3C شناخته می‌شود. WOFF در اصل OpenType یا TrueType با فشرده‌سازی و داده‌های متا است. هدف آن پشتیبانی از توزیع فونت از سرور به کاربر در شبکه‌هایی با محدودیت در باند است.
فرمت فونت وب آزاد (WOFF 2.0)
فونت‌های TrueType/OpenType از فشرده‌سازی بهتری نسبت به WOFF 1.0 ارائه می‌دهند.
فونت/شکل SVG
فونت‌های SVG اجازه می‌دهند که SVG به عنوان شکل‌های فونت در نمایش متن استفاده شود. استاندارد SVG 1.1 یک ماژول فونت را تعریف کرده است که اجازه می‌دهد فونت‌ها در مستندات SVG ایجاد شوند. شما همچنین می‌توانید CSS را به مستندات SVG اعمال کنید و قاعده @font-face نیز می‌تواند به متن مستندات SVG اعمال شود.
فونت‌های OpenType درون‌ریزی (EOT)
حروف EOT یک فرمت حروف OpenType فشرده شده توسط Microsoft است که به عنوان حروف تعبیه شده در صفحات وب استفاده می‌شود.
پشتیبانی مرورگر از فرمت حروف
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری هستند که از این فرمت حروف به طور کامل پشتیبانی می‌کند.
| فرمت حروف | |||||
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود | 3.2 | پشتیبانی نمی‌شود |
| EOT | 6.0 | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود |
*IE:این فرمت حروف فقط در حالتی که تنظیم شده "installable" است، معتبر است.
*Firefox:به طور پیش‌فرض پشتیبانی نمی‌شود، اما می‌توان آن را فعال کرد (برای استفاده از WOFF2 باید نشانه تنظیم شود "true")
از حروف مورد نیاز خود استفاده کنید
در قوانین @font-face: ابتدا نام حروف را تعریف کنید (مثلاً myFirstFont)، سپس به فایل حروف اشاره کنید.
نکته:URL حروف همیشه باید با حروف کوچک نوشته شود. حروف بزرگ ممکن است در IE نتایج غیرمنتظره‌ای ایجاد کند.
برای استفاده از حروف در عناصر HTML، نام حروف را از طریق خاصیت font-family به کار ببرید (myFirstFont):
مثال
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
از حروف تیره استفاده کنید
شما باید یک قوانین @font-face دیگر اضافه کنید که شامل توضیحات حروف تیره باشد:
مثال
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
فایل "sansation_bold.woff" یک فایل حروف است که حروف تیره حروف Sansation را شامل می‌شود.
هر زمان که یک بخش متن با خانواده حروف "myFirstFont" باید تیره نمایش داده شود، مرورگر از آن استفاده می‌کند.
به این ترتیب، شما می‌توانید برای یک حروف یکسانی چندین @font-face قوانین آورده شده است.
توضیحات حروف CSS
در جدول زیر لیستی از @font-face تمام نام‌گذاری‌کننده‌های حروف شکل‌دهنده تعریف شده در قوانین:
| نام‌گذاری‌کننده | مقدار | توضیح |
|---|---|---|
| font-family | name | ضروری است. نام حروف را تعریف کنید. |
| src | URL | ضروری است. URL فایل شکل‌دهنده حروف را تعریف کنید. |
| font-stretch |
|
اختیاری. تعریف نحوه کشش فونت. مقدار پیش‌فرض "normal" است. |
| font-style |
|
اختیاری. تعریف سبک فونت. مقدار پیش‌فرض "normal" است. |
| font-weight |
|
اختیاری. تعریف نازک یا چربی فونت. مقدار پیش‌فرض "normal" است. |
| unicode-range | unicode-range | اختیاری. تعریف محدوده حروف UNICODE پشتیبانی شده توسط فونت. مقدار پیش‌فرض "U+0-10FFFF" است. |
- صفحه قبلی تاثیر نوشتار CSS
- صفحه بعدی تغییرات 2D CSS
