Font Chữ

Đến với Vnskills, chúng tôi sẽ giúp bạn thiết kế website chuyên nghiệp

• Tự tin phân tích được giao diện web layout (Photoshop) để dựng và chọn lựa thẻ HTML phù hợp cho nội dung trang web.
• Nắm rõ nguyên tắc dựng giao diện HTML với khung DIV và các thành phần HTML chuẩn.
• Tạo được các thành phần web bằng HTML5 - CSS3 (Menu, Slide, Tab, Button, …)
• Cắt được đầy đủ giao diện HTML5 - CSS3 từ giao diện web layout Photoshop một cách dễ dàng.
• Biết giới hạn của HTML5, CSS3 và những phần việc HTML5 - CSS3 làm được khi thiết kế 1 website.
Ở bài học trước, chúng ta đã được tìm hiểu về cách định dạng màu chữ bằng CSS.Trong bài này, chúng ta sẽ tiếp tục tìm hiểu thêm về các thuộc tính CSS liên quan tới font chữ của các thành phần trong một trang web.

Thuộc tính font-family:

Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.
Có hai loại tên font được dùng để chỉ định trong font-family: family-names và generic families.
+ Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
+ Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,…
Khi lên danh sách font dùng để hiển thị một trang web bạn sẽ chọn những font mong muốn trang web sẽ được hiển thị để đặt ở các vị trí ưu tiên. Tuy nhiên, có thể những font này sẽ không thông dụng lắm nên bạn cũng cần chỉ định thêm một số font thông dụng dự phần như Arial, Tohama hay Times New Roman và bạn cũng được đề nghị đặt vào danh sách font của mình một generic families (thường thì nó sẽ có độ ưu tiên thấp nhất). Thực hiện theo cách này thì sẽ đảm bảo trang web của bạn có thể hiển thị tốt trên bất kỳ hệ thống nào.
Ví dụ sau chúng ta sẽ viết CSS để quy định font chữ dùng cho cả trang web là
Times New Roman, Tohama, sans-serif, và font chữ dùng để hiển thị các tiêu đề h1, h2, h3 sẽ là Arial, Verdana và các font họ serif. body { font-family:”Times New Roman”,Tohama,sans-serif }
h1, h2, h3 { font-family:arial,verdana,serif }
Mở trang web trong trình duyệt và kiểm tra kết quả. Chúng ta thấy phần tiêu đề sẽ được ưu tiên hiển thị bằng font Arial, nếu trên máy không có font này thì font Verdana sẽ được ưu tiên và kế đó sẽ là các font thuộc họ serif.
Chú ý: Đối với các font có khoảng trắng trong tên như Times New Roman cần được đặt trong dấu ngoặc kép.

Thuộc tính font-style:

Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web. Trong ví dụ bên dưới chúng ta sẽ thử thực hiện áp dụng kiểu in nghiêng cho thành phần h1 và kiểu xiên cho h2.
h1 {
 font-style:italic;
 }
h2 {
 font-style:oblique;
 }