ขนาดตัวอักษร CSS

สารบัญ

    แสดงสารบัญ

ขนาดตัวอักษร

font-size คุณสมบัติกำหนดขนาดของข้อความ

ความสามารถในการจัดการขนาดตัวอักษรเป็นสิ่งสำคัญในการออกแบบเว็บไซต์ อย่างไรก็ตามคุณ ไม่ควรใช้การปรับขนาดตัวอักษรเพื่อทำให้ย่อหน้ามีลักษณะเป็นส่วนหัวหรือ ส่วนหัวมีลักษณะเหมือนย่อหน้า

ใช้แท็ก HTML ที่เหมาะสมเสมอ เช่น <h1> - <h6> สำหรับส่วนหัวและ <p> สำหรับ ย่อหน้า

ค่าขนาดตัวอักษรสามารถเป็นได้ ขนาดสัมบูรณ์หรือขนาดสัมพัทธ์

ขนาดสัมบูรณ์:

  • ตั้งค่าข้อความให้มีขนาดที่ระบุ

  • ไม่อนุญาตให้ผู้ใช้เปลี่ยนขนาดข้อความในทุกเบราว์เซอร์ (ไม่ดีด้วยเหตุผลด้านการเข้าถึง)

  • ขนาดสัมบูรณ์มีประโยชน์เมื่อทราบขนาดทางกายภาพของเอาต์พุต

ขนาดสัมพัทธ์:

  • ตั้งค่าขนาดที่สัมพันธ์กับองค์ประกอบโดยรอบ

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

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

ตั้งค่าขนาดตัวอักษรด้วยพิกเซล

การตั้งค่าขนาดข้อความด้วยพิกเซลช่วยให้คุณควบคุมขนาดข้อความได้เต็มรูปแบบ:

ตัวอย่าง

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

เคล็ดลับ: หากคุณใช้พิกเซล คุณยังคงสามารถใช้เครื่องมือซูมเพื่อปรับขนาดทั้งหน้าได้

กำหนดขนาดตัวอักษรด้วย Em

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

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

ขนาดสามารถคำนวณได้จากพิกเซลถึง em โดยใช้สูตรนี้: <i>pixels/16=<i>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 */
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<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>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>
</html>

ในตัวอย่างข้างต้น ขนาดข้อความใน em จะเหมือนกับตัวอย่างก่อนหน้า เป็นพิกเซล อย่างไรก็ตาม ด้วยขนาด em คุณสามารถปรับขนาดข้อความได้ ในทุกเบราว์เซอร์

น่าเสียดายที่ยังคงมีปัญหากับเวอร์ชันเก่าอยู่ ของอินเตอร์เน็ตเอ็กซ์พลอเรอร์ ข้อความมีขนาดใหญ่กว่าที่ควรจะเป็น เมื่อทำให้ใหญ่ขึ้น และเล็กลงกว่าที่ควรเมื่อทำให้เล็กลง

ใช้การรวมกันของเปอร์เซ็นต์และ Em

วิธีแก้ปัญหาที่ใช้ได้กับทุกเบราว์เซอร์คือการตั้งค่าขนาดตัวอักษรเริ่มต้น เปอร์เซ็นต์สำหรับองค์ประกอบ <body>:

ตัวอย่าง

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<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>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

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

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

ขนาดข้อความสามารถตั้งค่าได้ด้วยหน่วย vw ซึ่งหมายถึง "ความกว้างของวิวพอร์ต"

ด้วยวิธีนี้ขนาดข้อความจะเป็นไปตามขนาดของหน้าต่างเบราว์เซอร์:

Hello World

Resize the browser window to see how the font size scales.

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

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