ورود به کارتابل مشتریان وب مهراز
فونت ها در CSS3
یادگیری CSSبااستفاده از css3 ، توسعه دهندگان وب مجبور نیستند فقط از فونت های مطمئن وب استفاده کنند.
فونت های وب در css3 - دستور font-face@
فونت های وب به کاربران امکان استفاده از فونت هایی را می دهند که در کامپیوترشان ذخیره نشده است.
زمانی که فونتی را که دوست دارید استفاده کنید پیدا می کنید/می خرید ، کافی است فایل فونت مورد نظر را روی سرور ذخیره و تنظیم کنید تا زمانی که نیاز بود بصورت اتوماتیک برای کاربر دانلود شود.
فونتفونت های مخصوص شما با استفاده از دستور font-face@ در css3 تعریف می شود.
پشتیبانی مرورگر
اعداد داخل جدول نشان دهنده اولین نسخه از مرورگر است که از این صفت پشتیبانی می کند.
| فرمت | کروم | اکسپلورر | فایرفاکس | سافاری | اپرا |
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
فرمت های متفاوت فونت
(TrueType Fonts (TTF
true type یک استاندارد فونت است که در اواخر دهه 1980 میلادی توسط مایکروسافت و اپل توسعه یافت. این استاندارد معمول ترین فرمت مورد استفاده در مک و ویندوز است.
(OpenType Fonts (OTF
open font فرمتی برای فونت های کامپیوتری مقیاس پذیر است که بر اساس TTF ساخته شده است و یک نشان تجاری ثبت شده برای مایکروسافت است. OTF این امروزه بر روی بسیاری از پلت فرم های کامپیوتری اصلی استفاده می شود.
(The Web Open Font Format (WOFF
WOFF فرمت فونت برای استفاده از صفحات وب است و گزینه اصلی توصیه شده توسط W3C می باشد. WOFF اساساً یک OTF یا TTF با تراکم و ابرداده های افزوده شده است. هدف از استفاده این فرمت پشتیبانی از توزیع فونت از سرور تا یک کاربر از طریق یک شبکه است.
(The Web Open Font Format (WOFF 2.0
فونت های true typ/open type که تراکم بهتری نسبت به WOFF 1.0 ارائه می کند.
فونت ها/اشکال SVG
فونت های SVG به سیستم گرافیک های مقیاس پذیر اجازه می دهد تا به عنوان اشکال مختلف در نمایش متن استفاده شود. مشخصات SVG 1.1 یک ماژول فونت تعریف می کند که امکان ایجاد یک فونت در سند SVG را فراهم می کند. همچنین می توانید CSS را به اسناد SVG اعمال کنید و دستور font-face@ می تواند به متن داخل اسناد SVG اعمال شود.
(Embedded OpenType Fonts (EOT
فونتهای EOT نوع متراکمی از فونت های Open Type هستند که توسط مایکروسافت به عنوان فونت های جاسازی شده در صفحات وب ، طراحی شده است.
پشتیبانی مرورگر
اعداد داخل جدول نشان دهنده اولین ورژن از مرورگر است که بطور کامل فرمت مورد نظر را پشتیبانی می کند.
| فرمت | کروم | اکسپلورر | فایرفاکس | سافاری | اپرا |
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Not supported | 36.0 | 35.0* | Not supported | 26.0 |
| SVG | Not supported | 4.0 | Not supported | 3.2 | 9.0 |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE : فرمت فونت فقط زمانی کار می کند که به عنوان installable تنظیم شود.
* Firefox : بطور پیش فرض پشتیبانی نمی کند اما می توان فعال کرد. (لازم است که flag را بر روی true تنظیم کنید تا از فرمت WOFF2 استفاده شود)
استفاده از فونت دلخواه
در دستور font-face@ باید ابتدا یک نام برای فونت مورد نظر تعریف کنید. و بعد به فایل فونت اشاره کنید.
راهنمایی : همیشه برای URL فونت از کاراکتر های کوچک استفاده کنید. کاراکتر های بزرگ باعث نتایج غیرمنتظره در IE می شوند.
برای استفاده از فونت برای یک عنصر HTML ، در داخل صفت font-family به نام فونت اشاره کنید.
مثال :
@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 ، فایل دیگری است که حاوی کاراکتر های ضخیم فونت مورد نظر است. زمانی که نیاز باشد هر قسمتی از متن با خانواده-فونت myFirstFont ضخیم شود ، مرورگر از این فایل استفاده خواهد کرد.
با این روش می توانید font-face@ زیادی برای همان فونت داشته باشید.
نظر شما
>