Cách đặt Phông Chữ Của Bạn Trong Html

Mục lục:

Cách đặt Phông Chữ Của Bạn Trong Html
Cách đặt Phông Chữ Của Bạn Trong Html

Video: Cách đặt Phông Chữ Của Bạn Trong Html

Video: Cách đặt Phông Chữ Của Bạn Trong Html
Video: 04 - Các thẻ định dạng font chữ văn bản trong HTML 2024, Có thể
Anonim

Phông chữ là một phần không thể thiếu trong thiết kế web, tạo cho trang web một phong cách riêng biệt. Văn bản chất lượng cao trên trang phải trông hài hòa, được kết hợp với các yếu tố còn lại của trang web và đồng thời góp phần giúp nhận thức thông tin tốt hơn. Sử dụng bảng đánh dấu HTML và bảng xếp tầng CSS, bạn có thể tùy chỉnh hầu hết mọi cài đặt để tối đa hóa hiệu suất trang.

Cách đặt phông chữ của bạn trong html
Cách đặt phông chữ của bạn trong html

Cần thiết

tệp phông chữ ở định dạng TTF

Hướng dẫn

Bước 1

Để sử dụng một bộ phông chữ được cài đặt trên máy tính của bạn, bạn có thể sử dụng tham số font-family của các biểu định kiểu xếp tầng. Để thực hiện việc này, hãy nhập mã sau cho mặt hàng mong muốn:

Chữ

Lệnh này sẽ hiển thị tiêu đề h2 cấp thứ hai trong kiểu chữ Arial.

Bước 2

Nếu bạn muốn sử dụng phông chữ của riêng mình, trước tiên bạn phải tải nó lên máy chủ và kích hoạt nó bằng lệnh thích hợp. Tệp TTF được bao gồm với lệnh sau:

Thuộc tính font-family trong trường hợp này chỉ định tên của kiểu chữ và src: url (font.ttf) chỉ định đường dẫn đến tệp TTF.

Bước 3

Sau khi bật phần tử, bạn có thể sử dụng phần tử đó để hiển thị văn bản:

Chữ

Lệnh này có nhiệm vụ hiển thị phông chữ phông chữ cần thiết ở dạng in nghiêng trong tiêu đề của cấp thứ hai. Nếu trình duyệt của người dùng không hỗ trợ xử lý tệp TTF, phông chữ hệ thống được chỉ định sau dấu phẩy đầu tiên (trong trường hợp này là Verdana) sẽ được sử dụng.

Bước 4

Một số trình duyệt không hỗ trợ TTF có thể tải xuống. Ví dụ, Internet Explorer 8 sử dụng định dạng EOT để hiển thị văn bản. Đối với các trình duyệt như vậy, hãy chuyển đổi TTF gốc bằng nhiều dịch vụ và đưa kiểu chữ kết quả vào tham số @ font-face theo cách tương tự.

Bước 5

Nếu bạn muốn nhập tệp bạn cần từ một tài nguyên khác, hãy sử dụng lệnh @import, lệnh này phải được viết ở đầu tài liệu CSS:

@import url (https:// font_address)

Đề xuất: