استفاده از فونت با @font-face در CSS3

در CSS3، دستور @font-face به شما این امکان را می‌دهد که از فونت‌های سفارشی در وب‌سایت خود استفاده کنید، حتی اگر این فونت‌ها روی سیستم کاربر نصب نشده باشند. در این روش، فایل فونت روی سرور قرار می‌گیرد و در صورت نیاز هنگام بارگذاری صفحه، به‌صورت خودکار دانلود می‌شود.

فرمت‌های مختلف فونت در CSS3

1. TrueType (TTF)

• یک استاندارد فونت که در اواخر دهه 1980 توسط مایکروسافت و اپل معرفی شد.
• این فرمت همچنان یکی از رایج‌ترین استانداردهای فونت در ویندوز و مک است.

2. OpenType (OTF)

• فرمت پیشرفته‌ای بر اساس TrueType که از چندین زبان پشتیبانی می‌کند.
• این فرمت توسط مایکروسافت و ادوبی توسعه داده شده و در بیشتر پلتفرم‌ها کاربرد دارد.

3. Web Open Font Format (WOFF)

• فرمت ویژه‌ای برای استفاده در صفحات وب که در 2009 معرفی شد.
• WOFF نسخه فشرده OpenType و TrueType است که برای بهبود سرعت بارگذاری و کاهش مصرف پهنای باند به کار می‌رود.

4. WOFF 2.0

• نسخه جدیدتر WOFF که فشرده‌تر بوده و عملکرد بهتری برای شبکه‌های کم‌سرعت دارد.

5. Embedded OpenType (EOT)

• نسخه فشرده OpenType که توسط مایکروسافت برای استفاده در اینترنت اکسپلورر توسعه داده شده است.

6. SVG Fonts

• این فونت‌ها از فرمت‌های گرافیکی برداری (SVG) استفاده می‌کنند و می‌توانند درون سندهای SVG اعمال شوند.

نحوه استفاده از @font-face در CSS

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

    @font-face {
        font-family: 'myFirstFont';
        src: url('sansation_light.woff');
    }
    
    div {
        font-family: 'myFirstFont';
    }

استفاده از فونت پررنگ (Bold)

برای نمایش متن پررنگ، باید یک دستور @font-face جدید با تنظیم font-weight تعریف کنید.

    @font-face {
        font-family: 'myFirstFont';
        src: url('sansation_bold.woff');
        font-weight: bold;
    }

نکات مهم:

• نام فایل و مسیر فونت را با حروف کوچک بنویسید تا از مشکلات در مرورگرهایی مانند Internet Explorer جلوگیری شود.
• می‌توانید چندین قانون @font-face برای یک فونت تعریف کنید تا برای انواع وزن (bold، italic) استفاده شوند.

توصیف گر های قلم نوشته (font descriptors) در CSS3 :

جدول زیر تمامی توصیف گرهای فونت که باید داخل قانون @font-face تعریف شوند را فهرست می کند: