قانون @font-face CSS
تعریف و استفاده
با استفاده از قوانین @font-face، طراحان وب دیگر نیازی به استفاده از فونت‌های "امنیت شبکه" ندارند.
در قوانین @font-face، ابتدا باید نام فونت را تعریف کنید (مثلاً myFirstFont) و سپس به فایل فونت اشاره کنید.
توضیح:URL فونت باید با حروف کوچک باشد. حروف بزرگ ممکن است در IE نتایج غیرمنتظره‌ای ایجاد کند!
برای استفاده از فونت در عناصر HTML، نام فونت را از طریق ویژگی font-family مراجعه کنید (myFirstFont):
div {
font-family: myFirstFont;
}
لطفاً به: مراجعه کنید
آموزش CSS:خطوط وب CSS
مثال
یک فونت به نام "myFirstFont" مشخص کنید و URL قابل دسترسی آن را تعیین کنید:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
شما می‌توانید آن را امتحان کنید
مثال‌های بیشتری از TIY در پایین صفحه پیدا می‌کنید.
قانون CSS
@font-face {
font-properties
}
| محدودیت‌های فونت | مقدار | توضیح |
|---|---|---|
| font-family | name | ضروری است. نام فونت را تعریف کنید. |
| src | URL | ضروری است. URL بارگذاری فونت را تعریف کنید. |
| font-stretch |
|
اختیاری. تعریف نحوه کشش فونت. مقدار پیش‌فرض "normal" است. |
| font-style |
|
اختیاری. تعریف سبک فونت. مقدار پیش‌فرض "normal" است. |
| font-weight |
|
اختیاری. تعریف ضخامت فونت. مقدار پیش‌فرض "normal" است. |
| unicode-range | unicode-range | اختیاری. تعریف محدوده Unicodeای که فونت پشتیبانی می‌کند. مقدار پیش‌فرض "U+0-10FFFF" است. |
مثال‌های بیشتر
مثال
شما باید یک قاعده @font-face دیگر اضافه کنید که شامل توصیفات متن تیره است:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
شما می‌توانید آن را امتحان کنید
فایل "sansation_bold.woff" یک فایل فونت دیگر است که حاوی حروف اضافی فونت Sansation به سبک تیره است.
هر زمان که یک段落 از متن باید به سبک "myFirstFont" نمایش داده شود، مرورگر از آن استفاده می‌کند.
به این ترتیب می‌توانید برای یک فونت چندین قاعده @font-face تنظیم کنید.
پشتیبانی مرورگر
Internet Explorer،Firefox،Opera،Chrome وSafari از قاعده @font-face پشتیبانی می‌کنند.
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهای پشتیبانی‌کننده از فرمت فونت کامل هستند.
| فرمت فونت | |||||
|---|---|---|---|---|---|
| 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 | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود | پشتیبانی نمی‌شود |
* Edge و IE: فرمت فونت تنها زمانی که به "installable" تنظیم شود معتبر است
* Firefox: به طور پیش‌فرض غیرفعال است، اما می‌توان آن را فعال کرد (برای استفاده از WOFF2 باید flag را به "true" تنظیم کرد).
