مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش قبلی چگونگی مدیریت متن و جلوگیری از بهم ریختگی و سریز شدن متن محتوا را بررسی کردیم، از آنجایی که متن ها یکی از اصلی ترین بخش محتوای وب را تشکیل می دهند تعیین فونت و فرمت متن نیز از اهمیت ویژه ای برخوردار است، برای این منظور آشنایی با طرز استفاده از فونت های وب در CSS ضروری است. در این خصوص باید با قوانین ویژگی font-face در CSS آشنایی داشته باشید.
فونت های وب در CSS
در این آموزش طرز استفاده از فونت های وب در CSS و کار با قوانین ویژگی font-face در CSS آشنا خواهیم کرد.
قوانین ویژگی font-face
فونت های وب به طراحان وب اجازه می دهد تا فونت هایی را که بر روی کامپیوتر کاربر نصب نشده اند استفاده کنند.
برای استفاده از این ویژگی باید فونت های مورد نظر را دانلود کرده و آن ها را در کد CSS صفحه خود اضافه کنید.
فونت های “own” شما در قوانین @font-face تعریف می شود.
فرمت های فونت مختلف
(TrueType Fonts (TTF
TrueType یک استاندارد فونت است که در اواخر دهه ۱۹۸۰ توسط اپل و مایکروسافت ایجاد شده است.
TrueType رایج ترین فونت برای سیستم عامل Mac OS و مایکروسافت ویندوز است.
(OpenType Fonts (OTF
OpenType یک فرمت برای فونت های کامپیوتری مقیاس پذیر است.
این در TrueType ساخته شده است و یک علامت تجاری ثبت شده مایکروسافت است.
فونت های OpenType امروزه در سیستم عامل های رایج استفاده می شوند.
(The Web Open Font Format (WOFF
WOFF یک قالب فونت برای استفاده در صفحات وب است.
WOFF اساسا OpenType یا TrueType با فشرده سازی و ابرداده های اضافی است.
(The Web Open Font Format (WOFF 2.0
فونت TrueType / OpenType که فشرده سازی بهتر از WOFF 1.0 را فراهم می کند.
SVG Fonts/Shapes
فونت SVG اجازه می دهد که SVG در هنگام نمایش متن به عنوان گلیف استفاده شود.
(Embedded OpenType Fonts (EOT
فونت EOT یک فرم جمع و جور از فونت های OpenType طراحی شده توسط مایکروسافت برای استفاده به عنوان فونت های جاسازی شده در صفحات وب است.
پشتیبانی فونت ها در مرورگرها
اعداد در جدول اولین نسخه مرورگری را مشخص می کند که به طور کامل از فرمت فونت پشتیبانی می کند.
| Font format | Internet Explorer / Edge | Chrome | Firefox | Safari | Opera |
|---|
| TTF/OTF | ۹٫۰* | ۴٫۰ | ۳٫۵ | ۳٫۱ | ۱۰٫۰ |
| WOFF | ۹٫۰ | ۵٫۰ | ۳٫۶ | ۵٫۱ | ۱۱٫۱ |
| WOFF2 | Not supported | ۳۶٫۰ | ۳۵٫۰* | Not supported | ۲۶٫۰ |
| SVG | Not supported | ۴٫۰ | Not supported | ۳٫۲ | ۹٫۰ |
| EOT | ۶٫۰ | Not supported | Not supported | Not supported | Not supported |
در مرورگر IE : فونت های زمانی کار می کند که در حالت “installable” تنظیم شود.
در مرورگر Firefox : به طور پیش فرض پشتیبانی نمی شود اما می توان آن را فعال کرد.
ویژگی font-face در CSS
در خصوصیت @font-face ابتدا نام فونت و سپس به فایل فونت اشاره کنید.
نکته : همیشه از حروف کوچک برای URL فونت استفاده کنید. حروف بزرگ می تواند نتایج غیر منتظره ای در IE ایجاد کند.
برای استفاده از فونت برای یک عنصر HTML، به نام فونت (myFirstFont) به ویژگی font-family مراجعه کنید:
مثال : خصوصیت @font-face
| @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } |
ویژگی bold
شما می توانید ویژگی bold را در قوانین @font-face تعریف کنید.
مثال : خصوصیت Bold
| @font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; } |
فایل “sansation_bold.woff” نیز یکی دیگر از فونت هایی ست که شامل حرف های پررنگ برای فونت Sansation می باشد.
شما می توانید از چندین قانون @font-face استفاده کنید.
توضیحات فونت های وب در CSS
جدول زیر لیست تمام خصوصیات فونت ها در ویژگی @font-face را نشان می دهد:
| Descriptor | Values | Description |
|---|
| font-family | name | ضروری بوده و یک نام برای فونت تعریف می کند. |
| src | URL | ضروری بوده و URL فونت را تعریف می کند. |
| font-stretch | normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded | اختیاری بوده و تعریف می کند که فونت باید کشیده شود. پیش فرض آن “normal” است. |
| font-style | normal
italic
oblique | اختیاری بوده و تعریف می کند که چگونه فونت را باید مدل دهید. پیش فرض آن “normal” است. |
| font-weight | normal
bold
۱۰۰
۲۰۰
۳۰۰
۴۰۰
۵۰۰
۶۰۰
۷۰۰
۸۰۰
۹۰۰ | اختیاری بوده و boldness فونت را تعریف می کند. پیش فرض آن “normal” است. |
| unicode-range | unicode-range | اختیاری بوده و طیف وسیعی از کاراکترهای UNICODE که فونت را پشتیبانی می کند را تعریف می کند. |
کلام آخر
یکی از ویژگی ها و خصوصیات ظاهری هر وب سایتی فونتی است که در متن وب سایت استفاده می شود، از این روی آشنایی با طرز کار با فونت های وب در CSS از اهمیت خاصی برخوردار است.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
