Trong nội dung bài hôm nay mình sẽ giới thiệu cho các
bạn về font chữ trong CSS
1. Thuộc tính font-family:
Thuộc tính font-family có tác dụng
định nghĩa một danh sách ưu tiên các font và cũng 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.
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) 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;
}
3. Thuộc tính font-variant:
Thuộc tính
font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một
font chữ.
Một font small-caps là một font
sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in
thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì
trình duyệt sẽ hiện chữ in hoa để thay thế.
Trong
ví dụ sau chúng ta sẽ sử dụng kiểu small-caps cho phần h1 h1 {
font-variant:small-caps
}
4. Thuộc tính font-weight:
Thuộc tính font-weight mô tả cách
thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold).
Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100
– 900.
Thử
in đậm phần p: p { font-weight:bold
}
5. Thuộc tính font-size:
Kích thước của một font được định bởi thuộc tính
font-size.
Thuộc tính này nhận các giá trị
đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xxsmall, x-small, small, medium,
large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng của
website bạn có thể lựa chon những đơn vị phù hợp. Ví dụ trang web của bạn phục
vụ chủ yếu là những người già, thị lực kém hay những người dùng sử dụng các màn
hình máy tính kém chất lượng thì bạn có thể cân nhấc sử dụng các đơn vị qui đổi
như em hay %. Như vậy sẽ đảm bảo font chữ trên trang web của bạn luôn ở kích
thước phù hợp.
Ở ví dụ sau trang web sẽ có
kích cỡ font là 20px, h1 là 3em = 3 x 20 = 60px, h2 là 2em = 40px.
body {
font-size:20px
} h1
{ font-size:3em
} h2 { font-size:2em
}
* Thuộc tính font rút gọn
Tương tự như các thuộc tính background, chúng ta cũng có thể
rút gọn các thuộc tính font lại thành một thuộc tính đơn như ví dụ sau:
h1 {
font-style: italic; font-variant:small-caps; font-weight: bold; font-size: 35px;
font-family: arial,verdana,sans-serif;
}
Thành
h1 {
font: italic bold 35px
arial,verdana,sans-serif;
}
Cấu trúc rút gọn cho các thuộc
tính nhóm font:
Font :<font-style> | < font-variant> |
<font-weight> | <font-size> |< font-family>
Đi qua bài học này, bạn đã nắm
bắt được cách định font chữ cho một thành phần trang web cũng như cách sử dụng
các kiểu font in nghiêng, in đậm, font small-caps và cách qui định kích thước
font. Trong bài học kế chúng ta sẽ được tìm hiểu thêm về các thuộc tính CSS về
định dạng văn bản.
Tài liệu tham khảo:học lập trình php, hoặc bạn có thể kết hợp học thêm đồ họa. Mình cũng cung cấp
một số tài liệu hỗ trợ các bạn học đồ họa nhé: tài liệu illustrator, tài liệuphotoshop, tài liệu corel draw.
0 nhận xét:
Đăng nhận xét