%45 تخفیف، با کد YaFateme روی تمام آموزش ها، بمناسبت ولادت حضرت زهرا (س)
زمان باقی مانده
سبد (0)

تبلیغات

فونت در CSS3

With CSS3, web designers are no longer forced to use only web-safe fonts


قانون font-face@ در CSS3

Wiki

تا قبل از CSS3 طراحان وب باید از فونت هایی استفاده می کردند که روی سیستم کاربر نصب شده بود.

با استفاده از CSS3 می توانید هر فونتی را که می خواهید استفاده نمایید.

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

فونت های شما با استفاده از قانون font-face@ در CSS3 تعریف می شوند.


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

Wiki

خاصیتپشتیبانی مرورگرها
@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@ پشتیبانی نمی کند.


استفاده از فونت های مورد علاقه تان

Wiki

با استفاده از قانون font-face@ ابتدا باید یک نام برای فونت خود مشخص نمایید (مثلاً myFirstFont) و سپس آنرا به فایل فونتی که قبلاً آپلود کرده اید هدایت کنید.

Note

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

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

مثال (فونت در CSS3)

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>
خودتان امتحان کنید »

ضخامت (Bold) فونت در CSS3

Wiki

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

مثال (فونت در CSS3)

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

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

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

در این روش شما می توانید، قوانین font-face@ زیادی برای یک فونت داشته باشید.


توصیف گر های فونت در CSS3

Wiki

در جدول زیر، لیستی از تمام خاصیت هایی که می توان در قانون 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
اختیاری است. سبک یا Style فونت را مشخص می کند. مقدار پیشفرض "normal" است.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
اختیاری است. ضخامت فونت را مشخص می کند. مقدار پیشفرض "normal" است.
unicode-range unicode-range اختیاری است. محدوده کاراکترهای UNICODE را مشخص می کند. مقدار پیشفرض "U+0-10FFFF" است.

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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