%45 تخفیف، با کد Tabestan روی تمام آموزش ها، بمناسبت جشنواره تابستانه بیاموز ...!
زمان باقی مانده (تمدید شد)

خصوصیت @font-face

مثال (خصوصیت @font-face)

نسبت دادن یک فونت به یک عنصر و مشخص کردن آدرس فایل فونت، در قانون [email protected]:

@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.


پشتیبانی مرورگرها

Internet ExplorerFirefoxOperaGoogle ChromeSafari

تمام مرورگرهای اصلی، قانون [email protected] را پشتیبانی می کنند.

مرورگرهای 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 به پایین از [email protected] پشتیبانی نمی کند.


تعریف و کاربرد

با استفاده از از قانون [email protected]، می توانید هر فونتی را که می خواهید استفاده نمایید. فقط کافی است در قانون [email protected] ابتدا یک نام برای فونت خود مشخص نمایید (مثلاً myFirstFont) و سپس آنرا به فایل فونتی که قبلاً روی سرور آپلود کرده اید هدایت کنید.

نکته: برای فونتِ URL، از حروف کوچک استفاده نمایید. استفاده از حروف بزرگ در IE می تواند نتیجه های متفاوت و غیر منتظره ای داشته باشد.

برای نسبت دادن یک فونت به یک عنصر، باید از خاصیت font-family استفاده کنید:

div
{
font-family: myFirstFont;
}

نحوه استفاده

@font-face
{
font-properties
}

در جدول زیر، لیستی از تمام خاصیت هایی که می توان در قانون [email protected] تعریف کرد، آمده است: (font-properties)

توصیف گرمقدارتوضیحات
font-familynameالزامی است. نام فونت را مشخص می کند.
srcURLالزامی است. URL فایل فونت را مشخص می کند.
font-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
اختیاری است. میزان کشیدگی کاراکترها را مشخص می کند. مقدار پیشفرض "normal" است.
font-stylenormal
italic
oblique
اختیاری است. سبک یا Style فونت را مشخص می کند. مقدار پیشفرض "normal" است.
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
اختیاری است. ضخامت فونت را مشخص می کند. مقدار پیشفرض "normal" است.
unicode-rangeunicode-rangeاختیاری است. محدوده کاراکترهای UNICODE را مشخص می کند. مقدار پیشفرض "U+0-10FFFF" است.

مثالs

مثال - خودتان امتحان کنید

مثال (خصوصیت @font-face)

باید نسخه درشت فونت خود را که شامل توضیحاتی برای Bold کردن متن است، اضافه نمایید:

@font-face
{
font-family: myFirstFont;
src: url(/sansation_bold.woff);
font-weight:bold;
}
خودتان امتحان کنید »

فایل "Sansation_Bold.woff" یک فایل دیگر است که شامل کاراکترهای Bold برای فونت Sansation است.

مرورگرها از این فایل زمانی استفاده می کنند که یک قطعه از متن با فونت "myFirstFont"، ضخیم (Bold) شده باشد.

در این روش شما می توانید، قوانین [email protected] زیادی برای یک فونت داشته باشید.


بیاموزهای مرتبط

CSS3 Font (بیاموز CSS3)

تبلیغات اینترنتی
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان