Lv.26 CSS Fonts

CSS Fonts การเลือกแบบอักษรที่เหมาะสมมีผลกระทบอย่างมากต่อประสบการณ์ของผู้อ่านที่มีต่อเว็บไซต์ของเรา แบบอักษรที่เหมาะสมจะสามารถสร้างเอกลักษณ์ให้กับแบรนด์ของเราได้

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

Syntax

font-family: ชื่อแบบอักษร;

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Fonts</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				font-family: "Times New Roman", Times, serif;
			}
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		
	</body>
</html>

CSS Fonts แบบอักษรที่ปลอดภัยสำหรับการทำเว็บ HTML และ CSS

แบบอักษรที่ใช้ในการทำเว็บไซต์และมีความปลอดภัยมากที่สุด มีดังต่อไปนี้

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

CSS Font Style

font-style คุณสมบัติส่วนใหญ่จะใช้เพื่อระบุข้อความตัวเอียง

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Style</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.normal {
				font-style: normal;
			}

			p.italic {
				font-style: italic;
			}

			p.oblique {
				font-style: oblique;
			}
		</style>
	</head>
	<body>
		
		<p class="narmal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="italic">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="oblique">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>

font-width คุณสมบัติระบุน้ำหนักของแบบอักษร

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Weight</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.narmal {
				font-weight: normal;
			}
			
			p.thick {
				font-weight: bold;
			}
			
			p.thicker {
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		
		<p class="narmal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="thick">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="thicker">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>

font-variant ข้อความแสดงเป็นแบบอักษรตัวพิมพ์เล็ก

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Variant</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p {
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>

CSS Font Size

font-size ใช้เพื่อกำหนดขนาดของตัวอักษร หน่วยที่สามารถใช้ในการกำหนดขนาดของตัวอักษร ได้แก่ px em vw

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Size</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			body {
				font-size: 100%;
			}
			
			h1 {
				font-size: 46px;
			}
			
			h2 {
				font-size: 1.875em;
			}
			
			p {
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
		<h3 style="font-size:10vw;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>
Top