قانون font-face@ در CSS3
CSS3 به طراحان وب این امکان را می دهد که هر فونتی را که می خواهند استفاده نمایند حتی فونت هایی که روی سیتم کاربر نصب نمی شوند.
فقط کافی است فونت مورد نیازتان را روی سرور آپلود کنید و نوشتن خود را با فونت مورد علاقه تان آغاز کنید. هر جا که نیاز به فونت باشد بصورت خودکار، دانلود می شود.
فونت های شما با استفاده از قانون font-face@ در CSS3 تعریف می شوند.
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
@font-face |
9.0 |
4.0 |
3.5 |
3.2 |
10.0
|
مرورگرهای Internet Explorer 9+, Firefox, Chrome, Safari, Opera فونت های از نوع WOFF یا (Web Open Font Format) را پشتیبانی می کنند.
مرورگرهای Chrome, Safari, Opera فونت های از نوع TTF یا (True Type Fonts) و OTF یا (OpenType Fonts) را پشتیبانی می کنند.
همچنین مرورگرهای Chrome, Safari, Opera فونت های SVG را پشتیبانی می کنند.
همچنین Internet Explorer فونت های EOT یا (Embedded OpenType) را پشتیبانی می کند.
نکته: Internet Explorer 8 به پایین از font-face@ پشتیبانی نمی کند.
فرمت های متفاوت فونت
-
(TrueType Fonts (TTF
-
(OpenType Fonts (OTF
-
(The Web Open Font Format (WOFF
-
(The Web Open Font Format (WOFF 2.0
-
SVG Fonts/Shapes
-
(Embedded OpenType Fonts (EOT
پشتیبانی مرورگرها از انواع فرمت های فونت
|
Font format |
|
|
|
|
|
|
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
|
استفاده از فونت های مورد علاقه تان
در قانون font-face@ ابتدا باید برای فونت خود یک نام مشخص کنید مثلاً(myFirstFont) ، سپس آنرا به فایل فونتی که قبلاً آپلود کرده اید هدایت کنید.
نکته : همیشه از حروف کوچک برای برای فونتِ URL استفاده کنید. استفاده از حروف بزرگ در IE می تواند نتیجه های غیر منتظره ای داشته باشد.
جهت استفاده یک فونت برای یک عنصر، باید از خاصیت font-family استفاده کنید:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
ضخامت متن در (CSS3 (Bold Text
باید قاعده دیگری را که شامل توضیحاتی برای Bold کردن متن است، اضافه نمایید:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
فایل "Sansation_Bold.woff" یک فایل دیگر است که شامل کاراکترهای Bold برای فونت Sansation است.
مرورگرها از این فایل زمانی استفاده می کنند که یک قطعه از متن با فونت "myFirstFont"، ضخیم (Bold) شده باشد.
در این روش شما می توانید، قوانین font-face@ زیادی برای یک فونت داشته باشید.
توصیف گرهای فونت در CSS3
در جدول زیر، لیست تمام خاصیت هایی که می توانند در قانون font-face@ تعریف شوند آمده است:
|
توصیف گر |
مقادیر |
توضیحات |
|
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" فونت را مشخص می کند.مقدار پیشفرض Style اختیاری است. سبک یا |
|
font-weight |
normal
bold
100
200
300
400
500
600
700
800
900 |
.است "normal"اختیاری است. ضخامت فونت را مشخص می کند. مقدار پیشفرض |
|
unicode-range |
unicode-range |
"U+0-10FFFF" را مشخص می کند. مقدار پیش فرض UNICODE اختیاری است. محدوده کاراکترهای
.است |