1. Thuộc tính font-family:
Font-family là một nhóm các font chữ được thiết kế theo cùng một cách nhìn tương tự nhau. Các font-family được thiết kế theo một hệ thống dự phòng. Để nếu font chữ đầu tiên không được trình duyệt hỗ trợ thì nó sẽ tự động chuyển sang font chữ tiếp theo của định dạng.Bạn bắt đầu với một font chữ mà bạn muốn định dạng và kết thúc với một định dạng chung. Để nếu như font chữ đầu tiên trình duyệt không thể hiển thị sẽ kế tiếp tới font tiếp theo và cuối cùng sẽ lựa chọn trong kho font chữ dự phòng cuối cùng.
Lưu ý: Font chữ định dạng nếu có nhiều hơn hai kí tự thì nó sẽ phải được đặt trong ngoặc kép như là "Times New Roman".
1
2
| body{ font-family: Arial, "Times New Roman", Tahoma, serif; } |
2. 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) đối với font hiện tại.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html><head><style>p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}</style></head><body><p class="normal">This is a paragraph, normal.</p><p class="italic">This is a paragraph, italic.</p><p class="oblique">This is a paragraph, oblique.</p></body></html> |
Ta thu được kết quả như sau:
3. Thuộc tính font-size với Pixels
Thuộc tính font-size nhằm thiết lập kích thước của văn bản.
Bạn có thể chỉnh font chữ theo phong cách của mình. Tuy nhiên trong HTML cũng có hỗ trợ các thẻ như từ <h1> tới <h6> cho tiêu đề và thẻ <p> cho cả đoạn văn bản.
Font-size có thể là một giá trị tuyệt đối hoặc tương đối.
Kích thước tuyệt đối là thiết lập văn bản đến một kích thước quy định. Kích thước tương đối điều chỉnh font chữ theo các yếu tố xung quanh.
1
2
3
4
| h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;} |
Tuy nhiên đoạn code trên chỉ hiểu được với các trình duyệt như Internet Explorer 9, Firefox, Chrome, Opera, và Safari. Trình duyệt IE trước 9 không thể hiểu được loại định dạng này.
4. Thuộc tính font-size với EM.
Để tránh vấn đề khó tiếp cận với các trình duyệt IE trước phiên bản 9.0. Nhiều nhà phát hành xử dụng " em" thay cho "px"
Kích thước mặc định của 1 "em" = 16px.
Kích thước cũng có thể quy đổi từ điểm ảnh qua em với giá trị trao đổi: pixel / 16 = em.
1
2
3
4
| h1 {font-size:2.5em;} /* 40px/16=2.5em */h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */ |
Với ví dụ trên, kích thước của font được định dạng như pixel tuy nhiên nó có thể hiển thị trên mọi trình duyệt khác nhau mà không quan tâm tới các phiên bản trình duyệt.
No comments:
Post a Comment