Kích thước font CSS

Kích thước font

font-size Thuộc tính đặt kích thước văn bản.

Trong thiết kế trang web, việc quản lý kích thước văn bản rất quan trọng. Tuy nhiên, không nên sử dụng việc điều chỉnh kích thước font để làm cho đoạn văn trông như tiêu đề, hoặc làm cho tiêu đề trông như đoạn văn.

Hãy luôn sử dụng các thẻ HTML chính xác, ví dụ <h1> - <h6> cho tiêu đề, và <p> chỉ cho đoạn văn.

Giá trị của font-size có thể là kích thước tuyệt đối hoặc tương đối.

Kích thước tuyệt đối：

  • Đặt văn bản thành kích thước đã chỉ định
  • Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (tính khả dụng kém)
  • Khi kích thước vật lý đầu ra được biết, kích thước tuyệt đối rất hữu ích

Kích thước tương đối：

  • Đặt kích thước tương đối với các yếu tố xung quanh
  • Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt

Ghi chú：Nếu bạn không chỉ định kích thước font, văn bản thông thường (như đoạn văn) có kích thước mặc định là 16px (16px = 1em).

Đặt kích thước font bằng pixel

Sử dụng pixel để đặt kích thước văn bản có thể kiểm soát hoàn toàn kích thước văn bản：

Example

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

Try It Yourself

Lưu ý：Nếu bạn đã sử dụng pixel, bạn vẫn có thể sử dụng công cụ thu phóng để điều chỉnh kích thước toàn bộ trang.

Đặt kích thước字体 bằng em

Để cho phép người dùng điều chỉnh kích thước văn bản (trong menu trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel.

W3C khuyến nghị sử dụng đơn vị kích thước em。

1em bằng kích thước字体 hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Do đó, kích thước mặc định 1em là 16px。

Bạn có thể sử dụng công thức này để tính từ pixel sang em để tính kích thước: pixels/16=em。

Example

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 */
}

Try It Yourself

Trong ví dụ trên, kích thước văn bản của đơn vị em bằng với kích thước pixel trong ví dụ trước. Nhưng, nếu sử dụng kích thước em, bạn có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.

Thật không may, phiên bản cũ của Internet Explorer vẫn còn存在问题。Khi phóng to văn bản, nó lớn hơn kích thước nên, và khi thu nhỏ văn bản, nó sẽ nhỏ hơn.

sử dụng tổ hợp phần trăm và Em

Example

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

Try It Yourself

Our code is running well at the moment! It displays the same text size in all browsers and allows all browsers to scale or adjust the text size!

Responsive Font Size

You can use vw Unit Set Text Size, which means "viewport width" ("viewport width").

So, the text size will follow the size of the browser window, please adjust the size of the browser window to see how the font size scales:

Example

<h1 style="font-size:10vw">Hello World</h1>

Try It Yourself

Viewport (Viewport) is the size of the browser window. 1vw = 1% of the viewport width. If the viewport is 50 cm wide, then 1vw is 0.5 cm.