Monday, 15 July 2024

การแอด CSS Font จาก Google มาใช้

20 Apr 2018
116
luminox watches

Google Font เป็นเว็บไซต์ที่ให้บริการฟอนต์ฟรีสำหรับใช้ในการออกแบบเว็บไซต์ ซึ่งเราสามารถนำมาใช้กับ CSS ได้โดยตรง โดยทำการลิงก์ไปยังไฟล์ฟอนต์ที่เก็บอยู่บน Google Font และกำหนด font-family ให้เป็นชื่อฟอนต์ที่ต้องการใช้ ตัวอย่างการใช้งาน Google Font ใน CSS ดังนี้

1. ให้เพิ่มลิงก์ไปยังไฟล์ CSS ของ Google Font ในส่วนหัวของเอกสาร HTML ดังนี้

<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Roboto”>
</head>

2. กำหนด font-family ใน CSS เพื่อใช้ฟอนต์ Roboto ที่เราเพิ่มเข้ามา ดังนี้

 

body {
font-family: ‘Roboto’, sans-serif;
}

 

โดยเราใช้คำสั่ง font-family เพื่อกำหนดฟอนต์ของข้อความทั้งหน้าเว็บไซต์ ในที่นี้เราใช้ฟอนต์ Roboto เป็นหลัก ถ้าไม่พบ Roboto ในเครื่องผู้ใช้ เราก็จะใช้ฟอนต์ sans-serif แทน

จากตัวอย่างข้างต้น เมื่อเรานำไปใช้กับ HTML ที่มีข้อความ ก็จะแสดงผลข้อความด้วยฟอนต์ Roboto ทันทีเมื่อแสดงหน้าเว็บไซต์

Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana