ລະດັບວິທະຍານ CSS

字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如

-

用于标题，而

仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
  • 当输出的物理尺寸已知时，绝对尺寸很有用

ຄວາມຂື້ນສູງທາງສັດສະນະ

  • ການກໍານົດຄວາມຂື້ນສູງຂອງກັບບັນຊີອ້ອມຂ້າງ
  • ອະນຸຍາດຜູ້ນຳໃຊ້ໃນການປະສານຄວາມຂື້ນສູງຄວາມຫລັງວັດທະນະທຳໃນບັນຊີອິນເຕີເນັດ

ຄວາມເວົ້າ:ຖ້າເຈົ້າບໍ່ກໍານົດຄວາມຂື້ນສູງ, ຄວາມຂື້ນສູງບົດສະຫລັບ (ເຊັ່ນ: ບົດ) ຈະແມ່ນ 16px (16px = 1em).

ການກໍານົດຄວາມຂື້ນສູງຂອງຕົວຊັ້ນ

ການນຳໃຊ້ຕົວຊັ້ນໃນການກໍານົດຄວາມຂື້ນສູງຄວາມຫລັງວັດທະນະທຳສາມາດຄວມຄວາມຂື້ນສູງຄວາມຫລັງວັດທະນະທຳຢ່າງສົມບູນ:

Example

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

Try It Yourself

ຄຳແນະນຳ:ຖ້າເຈົ້າໃຊ້ຕົວຊັ້ນ, ເຈົ້າຍັງສາມາດນຳໃຊ້ອຸປະກອນພັດທະນາໃນການປະສານຄວາມຂື້ນສູງບົດສະຫລັບຂອງບົດແບບ.

ການນຳໃຊ້ em ໃນການກໍານົດຄວາມຂື້ນສູງຂອງຄວາມຫລັງວັດທະນະທຳ

ເພື່ອອະນຸຍາດຜູ້ນຳໃຊ້ໃນການປະສານຄວາມຂື້ນສູງຄວາມຫລັງວັດທະນະທຳ (ໃນຄູ່ມຸມຂອງບັນຊີ), ບັນດາຜູ້ພັດທະນາຫລາຍຄົນໃຊ້ em ທີ່ບໍ່ສະແດງຕົວຊັ້ນ.

W3C ແນະນຳໃຊ້ຄວາມຂື້ນສູງ em.

1em ທຽບຄືກັບຄວາມຂື້ນສູງຂອງຄວາມຫລັງວັດທະນະທຳ. ຄວາມຂື້ນສູງຄົນຮັບບັນຊີອິນເຕີເນັດໂດຍການກໍານົດແບບທີ່ສົມບູນແມ່ນ 16px. ແຕ່ບໍ່ມີຄວາມສຳຄັນໃນການນຳໃຊ້ຄວາມຂື້ນສູງ 1em ທີ່ 16px.

ສາມາດນຳໃຊ້ການສະແດງຮູບຈຸດສູງຈາກຕົວຊັ້ນໄປຫາ em ໂດຍການນຳໃຊ້ການສະແດງຮູບ: 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

ໃນກໍລະນີນີ້, ຄວາມຂື້ນສູງຂອງຄວາມຫລັງວັດທະນະທຳໃນຈຸດນັບ em ມີຄວາມຂື້ນສູງຄືກັບຈຸດນັບຕົວຊັ້ນໃນກໍລະນີກ່ອນນີ້. ແຕ່ທີ່ຈະນຳໃຊ້ຄວາມຂື້ນສູງ 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 currently running well! It displays the same text size in all browsers and allows all browsers to scale or adjust text size!

Responsive font size

You can use vw Unit setting text size, which means "viewport width" ("viewport width").

Thus, 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.