خصوصیت @font-face
مثال (خصوصیت @font-face)
نسبت دادن یک فونت به یک عنصر و مشخص کردن آدرس فایل فونت، در قانون font-face@:
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، قانون font-face@ را پشتیبانی می کنند.
مرورگرهای 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@ پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از از قانون font-face@، می توانید هر فونتی را که می خواهید استفاده نمایید. فقط کافی است در قانون font-face@ ابتدا یک نام برای فونت خود مشخص نمایید (مثلاً myFirstFont) و سپس آنرا به فایل فونتی که قبلاً روی سرور آپلود کرده اید هدایت کنید.
نکته: برای فونتِ URL، از حروف کوچک استفاده نمایید. استفاده از حروف بزرگ در IE می تواند نتیجه های متفاوت و غیر منتظره ای داشته باشد.
برای نسبت دادن یک فونت به یک عنصر، باید از خاصیت font-family استفاده کنید:
{
font-family: myFirstFont;
}
نحوه استفاده
{
font-properties
}
در جدول زیر، لیستی از تمام خاصیت هایی که می توان در قانون font-face@ تعریف کرد، آمده است: (font-properties)
| توصیف گر | مقدار | توضیحات |
|---|---|---|
| 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 |
اختیاری است. سبک یا Style فونت را مشخص می کند. مقدار پیشفرض "normal" است. |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
اختیاری است. ضخامت فونت را مشخص می کند. مقدار پیشفرض "normal" است. |
| unicode-range | unicode-range | اختیاری است. محدوده کاراکترهای UNICODE را مشخص می کند. مقدار پیشفرض "U+0-10FFFF" است. |
مثال - خودتان امتحان کنید
مثال (خصوصیت @font-face)
باید نسخه درشت فونت خود را که شامل توضیحاتی برای Bold کردن متن است، اضافه نمایید:
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
فایل "Sansation_Bold.woff" یک فایل دیگر است که شامل کاراکترهای Bold برای فونت Sansation است.
مرورگرها از این فایل زمانی استفاده می کنند که یک قطعه از متن با فونت "myFirstFont"، ضخیم (Bold) شده باشد.
در این روش شما می توانید، قوانین font-face@ زیادی برای یک فونت داشته باشید.
بیاموزهای مرتبط
CSS3 Font (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 11417
