CSS ขนาดตัวหนังสือ

字体大小

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

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

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

-

用于标题，而

仅用于段落。

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

绝对尺寸：

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

ขนาดเรlativ:

  • ตั้งขนาดของเครื่องมือในสัญญาณที่อยู่รอบๆ
  • อนุญาตให้ผู้ใช้เปลี่ยนขนาดของข้อความในเบราเซอร์

หมายเหตุ:หากคุณไม่ได้ระบุขนาดของตัวอักษร ข้อความปกติ (เช่น ย่อหน้า) จะมีขนาดเริ่มต้นที่ 16px (16px = 1em)

ตั้งขนาดของตัวอักษรด้วย pixel

ใช้ pixel ตั้งขนาดของข้อความสามารถควบคุมขนาดของข้อความได้ทั้งหมด:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

คำแนะนำ:หากคุณใช้ pixel คุณยังสามารถใช้เครื่องมือการขยายขนาดเพื่อปรับขนาดของหน้าเว็บทั้งหมด

ตั้งขนาดของตัวอักษรด้วย em

เพื่อให้ผู้ใช้สามารถปรับขนาดของข้อความ (ในเมนูเบราเซอร์) หลายนักพัฒนาใช้ em แทน pixel

W3C แนะนำใช้หน่วยมาตรฐาน em

1em คือขนาดของตัวอักษรปัจจุบัน ขนาดของข้อความเริ่มต้นในเบราเซอร์เป็น 16px ดังนั้นขนาดเริ่มต้น 1em คือ 16px

สามารถใช้สูตรนี้เพื่อคำนวณขนาดจาก pixel ไปเป็น em: pixels/16=em。

ตัวอย่าง

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

ทดลองด้วยตัวเอง

ในตัวอย่างที่ผ่านมา em ของขนาดของข้อความเท่ากับขนาดของจุดของตัวอย่างที่ผ่านมา แต่หากใช้ขนาด em สามารถปรับขนาดของข้อความในทุกเบราเซอร์

ขอบคุณแต่ Internet Explorer รุ่นเก่ายังมีปัญหาอยู่。ขณะที่เพิ่มขนาดของข้อความเมื่อใช้การขยายขนาดของข้อความ มันจะใหญ่กว่าที่ควร และขณะที่ลดขนาดของข้อความ มันจะเล็กกว่า

ใช้ส่วนผสมของเปอร์เซ็นต์และ Em

ตัวอย่าง

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

ทดลองด้วยตัวเอง

โค้ดของเราปัจจุบันทำงานได้ดีที่สุด!มันแสดงข้อความที่เหมือนกันในทุกโบรว์เซอร์ และอนุญาตให้ทุกโบรว์เซอร์ย่อยขนาดหรือปรับขนาดข้อความ

ขนาดของอักษรที่ตอบสนอง

สามารถใช้ vw การตั้งค่าขนาดข้อความด้วยหน่วย มันหมายความว่า "ขนาด viewport" ("viewport width")

ดังนั้น ขนาดของข้อความจะตามขนาดของหน้าต่างบราวเซอร์ โปรดปรับขนาดหน้าต่างบราวเซอร์เพื่อดูว่าขนาดของตัวอักษรจะย่อยลงไหม

ตัวอย่าง

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

ทดลองด้วยตัวเอง

Viewport คือขนาดของหน้าต่างบราวเซอร์ 1vw = 1% ของขนาดของ viewport หาก viewport มีขนาด 50 เซนติเมตร แล้ว 1vw จะเท่ากับ 0.5 เซนติเมตร