با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش قبلی چگونگی مدیریت متن و جلوگیری از بهم ریختگی و سریز شدن متن محتوا را بررسی کردیم، از آنجایی که متن ها یکی از اصلی ترین بخش محتوای وب را تشکیل می دهند تعیین فونت و فرمت متن نیز از اهمیت ویژه ای برخوردار است، برای این منظور آشنایی با طرز استفاده از فونت های وب در CSS ضروری است. در این خصوص باید با قوانین ویژگی font-face در CSS آشنایی داشته باشید.
در این آموزش طرز استفاده از فونت های وب در CSS و کار با قوانین ویژگی font-face در CSS آشنا خواهیم کرد.
فونت های وب به طراحان وب اجازه می دهد تا فونت هایی را که بر روی کامپیوتر کاربر نصب نشده اند استفاده کنند.
برای استفاده از این ویژگی باید فونت های مورد نظر را دانلود کرده و آن ها را در کد 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
ابتدا نام فونت و سپس به فایل فونت اشاره کنید.
نکته : همیشه از حروف کوچک برای URL فونت استفاده کنید. حروف بزرگ می تواند نتایج غیر منتظره ای در IE ایجاد کند.
برای استفاده از فونت برای یک عنصر HTML، به نام فونت (myFirstFont) به ویژگی font-family
مراجعه کنید:
1 2 3 4 5 6 7 8 | @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } |
شما می توانید ویژگی bold را در قوانین @font-face
تعریف کنید.
1 2 3 4 5 | @font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; } |
فایل “sansation_bold.woff” نیز یکی دیگر از فونت هایی ست که شامل حرف های پررنگ برای فونت Sansation می باشد.
شما می توانید از چندین قانون @font-face
استفاده کنید.
جدول زیر لیست تمام خصوصیات فونت ها در ویژگی @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 از اهمیت خاصی برخوردار است.