Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Quy tắc @font-face CSS3

Sử dụng quy tắc @font-face để tải font mới vào trang

@font-face

Quy tắc @font-face cho phép tùy chọn các font chữ tải vào trang. Với quy tắc này, thiết kế trang không còn bị giới hạn các font chữ được cài đặt sẵn trong máy người dùng.

Nên chọn các font: .ttf (true type font), .otf (OpenType), woff (Web Open Font Format) vì được hỗ trợ từ hầu hết các trình duyệt như Chrome, FireFox, IE ...

Nghiên cứu ví dụ sau, sẽ tạo ra một font có tên fontvidu bằng quy tắc của @font-face


<style>
    @font-face {
        font-family: fontvidu;
        src: url('https://fonts.gstatic.com/s/permanentmarker/v7/9vYsg5VgPHKK8SXYbf3sMsW72xVeg1938eUHStY_AJ4.woff2');
    }

    .apdungfont {
        font-family: fontvidu, sans-serif;
    }
</style>

<p class="apdungfont">Đoạn văn này sử dụng font chữ 
    fontvidu được tạo ra bằng cách tải font bằng
     quy tắc của font-face</p>

Đoạn văn này sử dụng font chữ fontvidu được tạo ra bằng cách tải font bằng quy tắc của font-face

Như vậy để tải font mới vào trang, dùng cú pháp:

@font-face {
    font-family: ten-font-do-ban-dat;
    src: url(sansation_light.woff);
}

Vui lòng đăng ký ủng hộ kênh