วันผู้สูงอายุแห่งชาติ


การใช้ Font จาก Google Font ใน Web Page

เครื่องมือสำหรับนักพัฒนา (Developer Tools)

บทเรียนดีๆ สำหรับผู้ที่ต้องการแบ่งปัน บทเรียนของคุณอาจมีค่าสำหรับอีกหลายๆ คน

beta version

การใช้ Font จาก Google Font ใน Web Page

มานพ กองอุ่น google fonts 3365

ไม่ได้เข้า Google Font หลายวัน วันนี้มีโอกาสได้เข้า https://www.google.com/fonts มีตัวเตือนว่า A new version of Google Fonts is available. Take me there. ก็เลยได้คลิกเข้าไปดู "มันเจ๋งอ่ะ" มีลูกเล่นต่างๆ เพิ่มขึ้น เช่น การเปลี่ยนสีพื้นหลัง เป็นต้น

นอกจากนั้นยังมี Font ภาษาไทยให้เลือกมากมายตั้ง 12 แบบ ดังนี้

Kanit
Prompt
Itim
Taviraj
Trirong
Chonburi
Athiti
Mitr
Pridi
Maitree
Pattaya
Sriracha

ตัวอย่าง Font ไทยแบบต่างๆ

วิธีการนำไปใช้

สำหรับการนำ Font จาก Google ไปใช้นั้นสามารถทำได้โดยคลิกที่ปุ่มเครื่องหมาย + 

เพื่อเลือก Font ที่ต้องการ จากนั้นจะปรากฎแถบด้านล่าง สามารถเลือก Font ได้ตามจำนวนที่ต้องการ

คลิกที่แถบนี้ จากนั้นจะปรากฎรายละเอียการตั้งค่าการนำไปใช้

ตัวอย่างการนำมาใส่ในโครงสร้าง HTML ดังนี้

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Google Fonts Sample by ProgrammerThailand</title>
  <meta name="description" content="Test Google Fonts">
  <meta name="author" content="ProgrammerThailand">

  <link rel="stylesheet" href="style.css">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <h1>ทดสอบ</h1>
    <h2>ทดสอบ</h2>
    <h3>ทดสอบ</h3>
    ทดสอบการใช้งาน Google Fonts
</body>
</html>

ไฟล์ style.css กำหนดรายละเอียดดังนี้

@import 'https://fonts.googleapis.com/css?family=Kanit|Prompt';

body{
    font-family: 'Kanit', sans-serif;
}

h1,h2,h3{
    font-family: 'Prompt', sans-serif;
}

เมื่อเปิดไฟล์ใน Browser แล้วจะมีลักษณะดังนี้

นอกจากนั้นยังสามารถเลือก Customize ขนาดและน้ำหนักแบบต่างๆ ของ Font ได้เช่นกัน


หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com
กลับขึ้นบน