CSS Web Safe Fonts
แบบอักษรเว็บปลอดภัยคืออะไร
แบบอักษรที่ปลอดภัยสำหรับเว็บคือแบบอักษรที่ติดตั้งทั่วทุกเบราว์เซอร์และอุปกรณ์
แบบอักษรสำรอง
อย่างไรก็ตาม ไม่มีแบบอักษรที่ปลอดภัยสำหรับเว็บ 100% มีโอกาสเสมอที่แบบอักษรจะไม่พบหรือติดตั้งไม่ถูกต้อง
ดังนั้นจึงเป็นสิ่งสำคัญมากที่จะใช้แบบอักษรสำรองเสมอ
ซึ่งหมายความว่าคุณควรเพิ่มรายการ "แบบอักษรสำรอง" ที่คล้ายกันในfont-family
คุณสมบัติ หากแบบอักษรแรกใช้ไม่ได้ เบราว์เซอร์จะลองใช้แบบอักษรถัดไปและแบบอักษรถัดไป และอื่นๆ จบรายการด้วยชื่อตระกูลแบบอักษรทั่วไปเสมอ
ตัวอย่าง
ที่นี่มีแบบอักษรสามประเภท: Tahoma, Verdana และ sans-serif ฟอนต์ที่สองและสามเป็นฟอนต์สำรอง ในกรณีที่ไม่พบฟอนต์แรก
p {
font-family: Tahoma, Verdana, sans-serif;
}
สุดยอดแบบอักษรที่ปลอดภัยสำหรับเว็บสำหรับ HTML และ CSS
รายการต่อไปนี้เป็นแบบอักษรที่ปลอดภัยสำหรับเว็บที่ดีที่สุดสำหรับ HTML และ CSS:
- Arial (ซานเซอริฟ)
- เวอร์ดานา (ซานเซอริฟ)
- เฮลเวติกา (sans-serif)
- ทาโฮมา (sans serif)
- Trebuchet MS (ซานเซอริฟ)
- ไทม์ นิว โรมัน (serif)
- จอร์เจีย (เซริฟ)
- การามอนด์ (เซริฟ)
- Courier ใหม่ (โมโนสเปซ)
- Brush Script MT (ตัวสะกด)
หมายเหตุ:ก่อนที่คุณจะเผยแพร่เว็บไซต์ของคุณ โปรดตรวจสอบว่าแบบอักษรของคุณปรากฏบนเบราว์เซอร์และอุปกรณ์ต่างๆ อย่างไร และใช้แบบอักษรสำรองเสมอ!
Arial (ซานเซอริฟ)
Arial เป็นแบบอักษรที่ใช้กันอย่างแพร่หลายมากที่สุดสำหรับสื่อออนไลน์และสื่อสิ่งพิมพ์ Arial ยังเป็นแบบอักษรเริ่มต้นใน Google เอกสาร
Arial เป็นหนึ่งในแบบอักษรเว็บที่ปลอดภัยที่สุด และสามารถใช้ได้กับระบบปฏิบัติการหลักทั้งหมด
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
เวอร์ดานา (ซานเซอริฟ)
Verdana เป็นแบบอักษรยอดนิยม Verdana สามารถอ่านได้ง่ายแม้ในขนาดตัวอักษรที่เล็ก
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
เฮลเวติกา (sans-serif)
นักออกแบบชื่นชอบแบบอักษร Helvetica เหมาะสำหรับธุรกิจหลายประเภท
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
ทาโฮมา (sans serif)
แบบอักษร Tahoma มีช่องว่างระหว่างอักขระน้อยกว่า
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Trebuchet MS (ซานเซอริฟ)
Trebuchet MS ออกแบบโดย Microsoft ในปี 1996 ใช้แบบอักษรนี้อย่างระมัดระวัง ไม่รองรับระบบปฏิบัติการมือถือทั้งหมด
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
ไทม์ นิว โรมัน (serif)
Times New Roman เป็นหนึ่งในแบบอักษรที่เป็นที่รู้จักมากที่สุดในโลก มันดูเป็นมืออาชีพและถูกใช้ในหนังสือพิมพ์และเว็บไซต์ "ข่าว" มากมาย นอกจากนี้ยังเป็นแบบอักษรหลักสำหรับอุปกรณ์และแอปพลิเคชัน Windows
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
จอร์เจีย (เซริฟ)
Georgia เป็นฟอนต์เซอริฟที่สวยงาม สามารถอ่านได้ง่ายในขนาดแบบอักษรต่างๆ ดังนั้นจึงเป็นตัวเลือกที่ดีสำหรับการออกแบบที่ตอบสนองต่ออุปกรณ์เคลื่อนที่
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
การามอนด์ (เซริฟ)
Garamond เป็นฟอนต์คลาสสิกที่ใช้กับหนังสือที่ตีพิมพ์หลายเล่ม มีรูปลักษณ์ที่เหนือกาลเวลาและอ่านง่าย
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Courier ใหม่ (โมโนสเปซ)
Courier New เป็นฟอนต์ monospace serif ที่ใช้กันอย่างแพร่หลายมากที่สุด Courier New มักใช้กับการแสดงโค้ด และผู้ให้บริการอีเมลหลายรายใช้เป็นแบบอักษรเริ่มต้น Courier New ยังเป็นแบบอักษรมาตรฐานสำหรับบทภาพยนตร์อีกด้วย
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Brush Script MT (ตัวสะกด)
แบบอักษร Brush Script MT ออกแบบมาเพื่อเลียนแบบลายมือ มันดูสง่างามและซับซ้อน แต่อาจอ่านยาก ใช้อย่างระมัดระวัง
ตัวอย่าง
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
เคล็ดลับ:ดูGoogle Fonts ที่มีทั้งหมด และวิธีใช้งานด้วย