หน่วยของ Font CSS ฟอนต์ ซีเอสเอส

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

sonram
PHP Sr. Member
PHP Sr. Member
Posts: 81
Joined: 11/07/2016 10:05 am

หน่วยของ Font CSS ฟอนต์ ซีเอสเอส

Post by sonram »

css.png
css.png (9.27 KiB) Viewed 565 times
หน่วยของ font (ฟอนต์) CSS (ซี เอส เอส) หลายๆคนคงเคยสงสัยว่า การเลือกใช้หน่วยของตัวอักษรแบบไหนถึงจะเหมาะกับหน้าเว็บที่เราพัฒนาอยู่ อยากให้ขนาดของตัวอักษรบนหน้าเว็บที่เราพัฒนาอยู่นั้น ปรับไปพร้อมกับขนาดหน้าจอของ web browsers (เว็บ เบราเซอร์)ของ User (ยูเซอร์) เราต้องเลือกหน่วยของตัวอักษรแบบไหน บทความนี้ จะช่วยอธิบายหน่วยของ font (ฟอนต์) ต่างๆให้ได้เข้าใจเพื่อไปปรับใช้กับเว็บไซต์ของคุณให้มีความสวยมากขึ้น

หน่วยของ font (ฟอนต์) css (ซี เอส เอส) จะแบบได้เป็น 2 แบบ คือ แบบ absolute (แอฟโซลยูท) กับแบบ relative (รีเลทีฟ) ในแต่ละแบบก็จะแตกต่างกันไป
หน่วยแบบ absolute (แอฟโซลยูท) หน่วยที่กำหนดขนาดของฟอนต์ไปแบบตายตัว ไม่มีการปรับให้ใหญ่ขึ้นหรือเล็กลงตามขนาดหน้าจอ หน่วยแบบ absolute (แอฟโซลยูท) ก็คือ
px(Pixels) เป็นหน่วยที่ใช้แสดงผลบนหน้าจอ 1 pixel จะมีค่าเท่ากับ 1 จุดบนหน้าจอ เป็นหน่วยที่เล็กที่สุดในในหน้าจอแสดงผล
pt(Points) เป็นหน่วยที่ใช้กับงานที่เกี่ยวกับสื่อสิ่งพิมพ์ต่างๆ ที่มีการ print เพราะ 1 point มีค่าเท่ากับ 1/72 นิ้ว
หน่วยแบบ relative หน่วยที่ไม่มีขนาดตายตัวจะปรับเปลื่ยนไปตามขนาดของหน้าจอ หน่วยแบบนี้จะตรงกันข้ามกับหน่วยแบบ absolute หน่วยแบบ relative ก็คือ
em(Ems) เป็นหน่วยสำหรับ Typography (ไทโปกราฟีค) การออกแบบตัวอักษรและการจัดวางตัวอักษรโดยเฉพาะ ซึ่ง W3C แนะนำให้ใช้หน่วยนี้ ในการกำหนดขนาดของตัวอักษร
%(Percent) เป็นหน่วยที่กำหนดขนาดของ property (พรอปเพอร์ตีส์) ทั่วๆไป ใช้ได้ทั้ง width height และ font ด้วย

ดังนั้นจากการอธิบายแบบต่างๆของขนาดฟอนต์ หากต้องการกำหนดขนาด font (ฟอนต์) แบบตายตัว ที่นิยมกันคือ px แต่หากต้องการให้มีการปรับขนาด font (ฟอนต์)ตามขนาดหน้าจอ โดยที่นิยมกันจะใช้แบบ em(Ems)

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: facebook.com [Crawler] and 2 guests