@font-face
Quy tắc @font-face cho phép tùy chọn các font chữ tải vào trang, giúp bạn mở rộng nhiều loại font chữ thay vì chỉ sử dụng các font chữ mặc định được cài đặt sẵn trên máy tính người dùng. 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 ...
Bạn có thể lưu trữ lại các file trữ để có thể truy cập được qua địa chỉ URL của trang, hoặc lưu ở các dịch vụ lưu trữ mà trình duyệt có thể truy cập.
Cú pháp @font-face như sau:
@font-face {
/* các mô tả về font chữ */
}
Các môt tả về font chữ
Những mô tả về font chữ viết trong @font-face đó là các dòng giá trị viết theo cặp key:value;,
key tương ứng với các thuộc tính css về font chữ như:
font-family,
font-variant, font-weight, font-stretch, font-style ...
Trong đó đặc biệt chú ý đên hai thuộc tính trong mô tả là font-family để đặt tên font của bạn, và thuộc tính src để nạp file font từ một URL (có thể file font cục bộ).
Ví dụ, có file font chữ ở địa chỉ myfont.woff, bạn có thể mô tả font chữ đó bằng một tên font do bạn đặt ví dụ firstfont như sau:
@font-face {
font-family: firstfont; /* đặt tên font */
src: url(myfont.woff); /* tải font chữ */
}
Lúc đó, phần tử nào cần thiết lập sử dụng font chữ này, thì thiết lập thuộc tính font-family tương ứng với tên font do bạn đặt.
/* các phần tử p dùng font firstfont */
p {
font-family: firstfont;
}
Ví dụ: có file font chữ tại https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-regular.woff2
<style>
@font-face {
font-family: fontvidu;
src: url("https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-regular.woff2")
}
.apdungfont {
font-family: fontvidu;
font-size: 20px;
}
</style>
<p class="apdungfont">Đây là font chữ fontvidu</p>
Kết quả:
Đây là font chữ fontvidu
Ví dụ sử dụng font chữ từ Google Font
Trên trang https://fonts.google.com/ cung cấp nhiều file font chữ, bạn có thể tải về cho trang của bạn, hoặc có thể nhúng trực tiếp.
Ví dụ, chọn font chữ Dancing Script, chọn nhúng độ đậm font chữ Regular 400, trên trang sẽ cho phép bạn tải font về và cũng cung cấp mã để bạn tích hợp ngay mà không tải về, ví dụ font trên mã nhúng CSS:
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
Nếu trong CSS bạn có mã này thì bạn có font chữ với tên 'Dancing Script'.
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
.fontds {
font-family: 'Dancing Script';
font-size: 50px;
}
</style>
<p class="fontds">Đây là font chữ Dancing Script</p>
Kết quả:
Đây là font chữ Dancing Script
