CSS3: Cách dùng font

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Trong bài viết này, chúng ta sẽ tìm hiểu 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 thì bạn cần đặt trong cặp nháy 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;
}

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
}

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;
}

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ị xx-small, 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ị quy đổ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 viết 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.

Dưới đây là bảng danh sách chi tiết các thuộc tính font.

Thuộc tính

Mô tả

Giá trị

NN

IE

W3C

font

Thuộc tính thu gọn để thiết lập tất cả thuộc tính cho một phông trong một khai báo.

font-style
font-variant
font-weight
font-size/line-height
font-family

caption
icon
menu
message-box
small-caption
status-bar

4.0

4.0

CSS1

font-family

Một danh sách ưu tiên của các họ phông cho một thành phần.

family-name
generic-family

4.0

3.0

CSS1

font-size

Thiết lập kích cỡ cho một phông chữ.

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

4.0

3.0

CSS1

font-stretch

Những rút gọn hoặc mở rộng của phông.

normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

 

 

CSS2

font-style

Thiết lập kiểu cách của phông.

normal
italic
oblique

4.0

4.0

CSS1

font-variant

Hiển thị văn bản trong một phông chữ HOA NHỎ hoặc một phông chữ thường.

normal
small-caps

6.0

4.0

CSS1

font-weight

Thiết lập độ đậm của phông.

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

4.0

4.0

CSS1

» Tiếp: Cách dùng text
« Trước: Cách dùng background
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!