Thuộc tính Font trong CSS

(9)
174 lượt xem
Share

Trong mội trang web đôi lúc chúng ta cần in đậm, in nghiêng hay thay đổi font chữ của một đoạn văn bản nào đó mà không muốn sử dụng thẻ HTML để tác động. Chúng ta hoàn toàn có thể làm được điều đó với các thuộc tính font trong CSS. Mời bạn đọc cùng eLib.VN tham khảo bài viết dưới đây của eLib để biết thêm thông tin về thuộc tính font.

Mục lục nội dung

Thuộc tính Font trong CSS

1. Giới thiệu chung về thuộc tính font trong CSS

Để thiết lập font cho một trang HTML hoặc cho từng phần tử trong trang, bạn sử dụng các thuộc tính sau:

  • Thuộc tính font-family: được sử dụng để thay đổi bề mặt font

  • Thuộc tính font-style: được sử dụng để tạo một font chữ nghiêng hoặc chếch

  • Thuộc tính font-variant: được sử dụng để tạo những chữ hoa nhỏ (small-cap)

  • Thuộc tính font-weight: được sử dụng để tăng giảm độ đậm của font

  • Thuộc tính font-size: được sử dụng để xác định kích cỡ font

  • Thuộc tính font: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn xác định được các thuộc tính liên quan tới font ở trên.

2. Thiết lập Font Family trong CSS

Trong CSS, có hai loại Font Family:

  • generic family: một nhóm các Font Family có bề mặt khá tương tự nhau. Ví dụ Serif hoặc Monospace.

  • font family: một font family cụ thể, ví dụ như Time New Roman hoặc Arial.

Để thay đổi bề mặt font của một phần tử nào đó, bạn có thể sử dụng thuộc tính font-family trong CSS.

Nói chung, khi sử dụng thuộc tính font-family, bạn nên xác định nhiều hơn một giá trị. Nếu trình duyệt không hỗ trợ giá trị font đầu tiên, nó sẽ thử giá trị tiếp theo, … Bắt đầu với giá trị font mà bạn muốn và kết thúc với một generic family để trình duyệt chọn một font tương tự trong generic family nếu không có font nào có sẵn.

Ghi chú: Nếu tên font có nhiều hơn một từ, thì bạn phải đặt trong trích dẫn kép, ví dụ như: "Times New Roman".

Dưới đây là ví dụ minh họa cách xác định Font Family cho một phần tử. Giá trị cho thuộc tính font-family là bất kỳ tên font family hợp lệ nào.

<html>
	<head></head>
	<body>
		<p style="font-family:georgia,garamond,serif;">
      Phan noi dung nay duoc hien thi voi mot trong cac font: georgia, garamond, hoac gia tri mac dinh la serif  
      phu thuoc vao trinh duyet cua ban.
      </p>
	</body>
</html>

Kết quả là:

3. Thiết lập Font Style trong CSS

Thuộc tính font-style trong CSS thường được sử dụng khi bạn muốn xác định một font chữ nghiêng. Các giá trị mà thuộc tính này có thể nhận là: normal, italic hoặc oblique. Trong đó, normal là hiển thị văn bản như bình thường, italic và oblique thì khá giống nhau, để hiển thị dạng nghiêng. Tuy nhiên, oblique ít được hỗ trợ hơn.

Ví dụ

<html>
   <head>
   </head>
   <body>
      <p style="font-style:italic;">
      Doan van nay se duoc hien thi duoi dang in nghieng.
      </p>
   </body>
</html>

Kết quả là:

4. Thiết lập Font Variant trong CSS

Để tạo các chữ hoa nhỏ (dạng small-cap), bạn sử dụng thuộc tính font-variant trong CSS. Thuộc tính này nhận hai giá trị là normal và small-caps. Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="font-variant:small-caps;">
      Doan van nay se duoc hien thi duoi dang cac chu hoa nho.
      </p>
   </body>
</html>

Kết quả là:−

5. Thiết lập Font Weight trong CSS

Để thiết lập mức độ đậm của văn bản, bạn sử dụng thuộc tính font-weight trong CSS. Thuộc tính này có thể nhận các giá trị: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<html>
   <head>
   </head>
   <body>
      <p style="font-weight:bold;">Doan van nay duoc hien thi duoi dang in dam.</p>
      <p style="font-weight:bolder;">Doan van nay duoc hien thi duoi dang in dam hon.</p>
      <p style="font-weight:500;">Doan van nay co Font Weight la 500..</p>
   </body>
</html>

Kết quả là:

6. Thiết lập Font Size trong CSS

Để thiết lập kích cỡ font, bạn sử dụng thuộc tính font-size trong CSS. Thuộc tính này có thể nhận các giá trị tương đối hoặc tuyệt đối: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels hoặc in %.Ví dụ

<html>
   <head>
   </head>
   <body>
      <p style="font-size:20px;">Doan van nay co Font Size la 20 pixel.</p>
      <p style="font-size:small;">Doan van nay co Font Size la small</p>
      <p style="font-size:large;">Doan van nay co Font Size la large</p>
   </body>
</html>

Kết quả là:

Việc quản lý kích cỡ văn bản trong các phần khác nhau là rất quan trong trong thiết kế Web. Tuy nhiên, bạn không nên sử dụng thuộc tính font-size-adjust để làm cho các đoạn văn trông giống như các phần tiêu đề, hoặc tiêu đề lại trông giống như đoạn văn như trong phần Thuộc tính font-size-adjust trong CSS dưới đây. Lời khuyên hữu ích cho bạn là hãy sử dụng các thẻ HTML phù hợp, ví dụ như các thẻ <h1> - <h6> cho phần tiêu đề và thẻ <p> cho các đoạn văn.

7. Thuộc tính font-size-adjust trong CSS

Sử dụng thuộc tính font-size-adjust trong CSS, bạn có thể điều chỉnh kích cỡ văn bản của một phần tử. Thuộc tính này giúp bạn điều chỉnh x-height để làm cho font dễ đọc hơn. Giá trị của thuộc tính là bất kỳ số nào. Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="font-size-adjust:0.61;">
         Doan van nay su dung thuoc tinh font-size-adjust co gia tri 0.61.
      </p>
   </body>
</html>

Kết quả là:

8. Thiết lập Font Size bằng Pixel trong CSS

Việc thiết lập kích cỡ font bằng Pixel giúp bạn kiểm soát hoàn toàn kích cỡ văn bản. Ví dụ minh họa:

<html>
   <head>
   </head>
   <body>
      <p style="font-stretch:ultra-expanded;">
            Neu gia tri cua thuoc tinh nay khong co hieu qua, tuc la may tinh cua ban 
            khong ho tro hai gia tri: condensed hoac expanded.
      </p>
   </body>
</html>

Kết quả là:

Ghi chú: Nếu bạn sử dụng Pixel, bạn vẫn có thể sử dụng tính năng Zoom để tăng giảm kích cỡ của cả trang web.

9. Thiết lập Font Size bằng Em trong CSS

Để cho phép người dùng tăng giảm kích cỡ của văn bản (trong menu của trình duyệt), nhiều lập trình viên sử dụng đơn vị em thay cho pixel.

Đơn vị em được đề nghị sử dụng bởi W3C.

1em thì bằng với kích cỡ font hiện tại. Kích cỡ văn bản mặc định là 16px, do đó kích cỡ mặc định của 1em sẽ là 16px.

Ví dụ

<html>
<head>
<style>
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 */
}
</style>
</head>
<body>

<h1>Phan tieu de 1</h1>
<h2>Phan tieu de 2</h2>
<p>Day la mot doan van.</p>
<p>Xac dinh kich co font voi gia tri em cho phep nhieu trinh duyet co the tang giam kich co van ban.
Tuy nhien, mot so trinh duyet cu co the khong hieu gia tri em nay mot cach dung dan.</p>

</body>
</html>

Trong ví dụ trên, kích cỡ văn bản được xác định bằng đơn vị em là giống như trong ví dụ trước khi được xác định bằng đơn vị pixel. Tuy nhiên, với em, bạn có thể căn chỉnh kích cỡ văn bản trong mọi trình duyệt.

Tuy nhiên, trong một số trình duyệt IE cũ, văn bản sẽ hiển thị lớn hơn nhiều khi chúng được tạo lớn hơn và hiển thị nhỏ hơn nhiều khi chúng được tạo nhỏ hơn.

10. Sử dụng kết hợp % và em trong CSS

Giải pháp để cho phần định nghĩa kích cỡ font của bạn có thể làm việc đúng trên tất cả mọi trình duyệt, bạn nên thiết lập một font-size mặc định bằng giá trị % cho phần tử <body>.

Ví dụ

<html>
	<head>
		<style>
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}
</style>
	</head>
	<body>
		<h1>Phan tieu de 1</h1>
		<h2>Phan tieu de 2</h2>
		<p>Day la mot doan van.</p>
		<p>Xac dinh kich co font bang % va em la lua chon hieu qua nhat cho tat ca trinh duyet!</p>
	</body>
</html>

11. Thuộc tính font trong CSS

Để tối thiểu hóa lượng code cần phải viết, bạn có thể sử dụng thuộc tính font trong CSS để thiết lập tất cả thuộc tính liên quan tới Font đã được trình bày ở phần trên.

Trong thuộc tính font này, bạn thiết lập các thuộc tính liên quan tới font theo thứ tự như trong cú pháp sau:

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

Trong đó, giá trị của hai thuộc tính font-size và font-family là bắt buộc. Nếu bạn không xác định một trong các giá trị khác thì giá trị mặc định sẽ được sử dụng (nếu có).

Ghi chú: thuộc tính line-height trong CSS được sử dụng để thiết lập khoảng cách giữa các dòng.

Ngoài một số giá trị đã được liệt kê ở trên, thuộc tính font trong CSS có thể nhận các giá trị khác như trong ví dụ sau:
font: font-style font-variant font-weight font-size/line-height 
font-family|caption|icon|menu|small-caption|status-bar;

Bạn sẽ lần lượt tìm hiểu các thuộc tính này trong chương Tổng hợp các thuộc tính trong CSS.

Ví dụ đơn giản về cách sử dụng thuộc tính font trong CSS:

<html>
   <head>
   </head>
   <body>
      <p style="font:italic small-caps bold 15px georgia;">
      Bang Style Rule tren, ban co the xac dinh gia tri cho tat ca cac thuoc tinh lien quan toi font.
      </p>
   </body>
</html>

Kết quả là:

Trên đây là bài viết của eLib.VN về thuộc tính Font trong CSS. Đây là những kiến thức bạn cần nắm vững nếu muốn tạo ra các trang web có trải nghiệm tốt hơn.

(9)
174 lượt xem
Share
Ngày:10/11/2020 Chia sẻ bởi:Tuyết Trịnh
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM