قانون font-face@ در CSS3
تا قبل از CSS3 طراحان وب باید از فونت هایی استفاده می کردند که روی سیستم کاربر نصب شده بود.
با استفاده از CSS3 می توانید هر فونتی را که می خواهید استفاده نمایید.
فقط کافی است فونت مورد نیازتان را روی سرور آپلود کنید و نوشتن خود را با فونت مورد علاقه تان آغاز کنید. هر جا که نیاز به فونت باشد بصورت خودکار، دانلود می شود.
فونت های شما با استفاده از قانون font-face@ در CSS3 تعریف می شوند.
مرورگرهای 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@ ابتدا باید یک نام برای فونت خود مشخص نمایید (مثلاً myFirstFont) و سپس آنرا به فایل فونتی که قبلاً آپلود کرده اید هدایت کنید.
 |
نکته: برای فونتِ URL، از حروف کوچک استفاده نمایید. استفاده از حروف بزرگ در IE می تواند نتیجه های متفاوت و غیر منتظره ای داشته باشد.
|
برای نسبت دادن یک فونت به یک عنصر، باید از خاصیت font-family استفاده کنید:
مثال (فونت در CSS3)
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
ضخامت (Bold) فونت در CSS3
باید نسخه درشت فونت خود را که شامل توضیحاتی برای Bold کردن متن است، اضافه نمایید:
مثال (فونت در CSS3)
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
فایل "Sansation_Bold.woff" یک فایل دیگر است که شامل کاراکترهای Bold برای فونت Sansation است.
مرورگرها از این فایل زمانی استفاده می کنند که یک قطعه از متن با فونت "myFirstFont"، ضخیم (Bold) شده باشد.
در این روش شما می توانید، قوانین font-face@ زیادی برای یک فونت داشته باشید.
کامنت جدید ...