Menu
GIỚI THIỆU
  • Bài này chúng ta tìm hiểu về các thuộc tính trong css CSS định dạng text, text-decoration, text-indent và text-align trong CSS và một số thuộc tính khác như color

Bài 05: Định dạng text bằng các thuộc tính nào trong CSS?

Trong bài này bạn sẽ được học về font chữ và cách thức nó được áp dụng CSS. Chúng ta cũng sẽ xem xét cách thức chọn một số font đặc biệt dành cho web và đối mặt với các vấn đề khi sử dụng các loại font chỉ có thể hiển thị trên trang web nếu chúng được cài đặt sẵn trong máy tính cá nhân của người truy cập. Những thuộc tính CSS sau đây sẽ được phân tích:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

Các thuộc tính font trong CSS

Hệ Font [font-family]

Thuộc tính font-family được dùng để khai báo danh sách các kiểu chữ theo thứ tự ưu tiên khi được gán cho các phần tử HTML. Nếu font chữ đầu tiên được khai báo không được cài đặt sẵn trong máy tính người truy cập, trình duyệt sẽ dùng những font chữ kế tiếp trong danh sách khai báo để hiển thị.

Có hai loại tên được dùng để phân loại font chữ : family-names (tên font chữ) và generic families. (Họ font chữ). Hai tên này được giải thích dưới đây

Family-name

Thường là tên của kiểu font chữ như  “Arial”, “Times New Roman” hoặc “Tahoma”.

Generic family

Generic families là tên mô tả theo nhóm kiểu chữ có hình thức bên ngoài tương tự nhau. Thí dụ  sans-serif, đây là nhóm của các kiểu chữ không “chân”.

Bạn có thể hình dung như hình sau:

font-size

Khi bạn khai báo danh sách font chữ trên website, font ưu tiên sẽ được đưa lên đầu tiên, tiếp sau đó là các font chữ thay thế, thông thường danh sách font này nên cùng một generic families vì như vậy các font chữ thay thế sẽ đồng nhất kiểu dáng trong trường hợp font chữ ưu tiên không có sẵn trong máy người truy cập

Bạn hãy xem ví dụ một cách khai báo danh sách font dưới đây:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Ở ví dụ trên, tiêu đề được đánh dấu bằng thẻ H1 sẽ hiển thị theo kiểu chữ “Arial“. Nếu font chữ này không có sẵn trong máy tính người truy cập, “Verdana” là font chữ kế tiếp được lựa chọn. Nếu tất cả font chữ này đều không có sẵn, một font bất kỳ cùng họ sans-serif sẽ được áp dụng cho các dòng tiêu đề.

Lưu ý phía trên, font chữ “Times New Roman” có vẫn khoảng trắng và đặt trong hai dấu ngoặc kép.

Font style [font-style]

thuộc tính font-style  xác định kiểu chữ có dạng normal, italic hay oblique. Ví dụ tiêu đề <h2> sẽ được hiển thị theo bằng font chữ “Times New Romance”

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}

Font variant [font-variant]

Thuộc tính font-variant dùng để xác định font chữ có kiểu normal hay small-capssmall-caps là kiểu chữ in hoa nhưng các ký tự nhỏ hơn kiểu chữ in hoa chuẩn.

Xem ví dụ:

Bốn ví dụ về phông chữ nhỏ
Bốn ví dụ về phông chữ nhỏ

Trong trường hợp font-variant được khai báo là  small-caps nhưng font chữ không có kiểu small-caps trình duyệt sẽ hiển thị font chữ in hoa chuẩn (uppercase).

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Thuộc tính in đậm hoặc mảnh của font [font-weight]

Thuộc tính font-weight nhằm xác định kiểu chữ  sẽ được in đậm hoặc mảnh. Font chữ có thể được khái báo normal hoặc bold. Một vài trình duyệt chấp nhận khai báo độ in đậm của kiểu chữ bằng số từ 100-900.

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Kích cỡ font chữ [font-size]

Kích cỡ font chữ được quyết định bởi thuộc tính font-size.

Có nhiều loại đơn vị tính như pixels, point  hay phần trăm … . Ví dụ dưới đây sẽ cho bạn hình dung ra một vài đơn vị phổ biến được sử dụng để khai báo kích cỡ font

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Có những điểm khác nhau then chốt  giữa các đơn vị này. Các đơn vị px and pt tạo ra các font chữ có kích cỡ cố định, trong khi đó % và em cho phép người truy cập tùy chỉnh.  Nhiều truy cập có thể là người tàn tật, người già, người có thị lực yếu hoặc do màn hình quá xấu, sử dụng đơn vị % or em sẽ giúp họ tùy chỉnh kích cỡ font chữ phù hợp.

Dưới đây là hình minh họa cách người truy cập có thể điều chỉnh kích cỡ font chữ để xem trên trình duyệt Internet Explorer

Font-resize

Thuộc tính font rút gọn [font]

Sử dụng thuộc tính font nếu bạn muốn kết hợp tất cả thuộc tính trên vào một selector để tiết kiệm dung lượng tập tin và dễ dàng quản lý.

Vi dụ đây là những thuộc tính font được áp dụng cho tag <p>:

p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Sử dụng thuộc tính rút gọn ta sẽ có dòng code gọn như sau:

p { font: italic bold 30px arial, sans-serif; }

Thứ tự các giá trị của thuộc tính font sẽ là:

font-style | font-variant | font-weight | font-size | font-family

Tóm lược bài học

Bạn vừa hoàn tất bài học về các thuộc tính liên quan đến font chữ trên web. Hãy nhớ rằng sử dụng CSS để quản lý cách thức hiển thị font chữ trên web sẽ giúp bạn tiết kiệm nhiều thời gian và tiện lợi. Chỉ cần thay đổi kích cỡ, kiểu font trên tập tin CSS bạn có thể thay đổi cách hiển thị của font chữ trên hàng loạt các trang web được liên kết với tập tin CSS này. Trong bài tiếp theo Định dạng thẻ a (links) bằng thuộc tính nào?

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 05: Định dạng text bằng các thuộc tính nào trong CSS?

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha