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