W3.CSS Google Fonts
ด้วย W3.CSS การเพิ่มแบบอักษรใหม่ทำได้ง่ายมาก
- ใช้งานง่ายมาก (เฉพาะ CSS และ HTML)
- ใช้ไลบรารีแบบอักษรภายนอกได้ไม่จำกัด (เช่น Google Fonts)
- ใช้งานได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด
นี่คือ Roboto
นี่คือโซเฟีย
โซเฟีย ออนไฟร์
ทำเว็บ!
ทำเว็บ!
ทำเว็บ!
ทำเว็บ!
ทำเว็บ!
การใช้ Google Fonts
Google Fonts ใช้งานได้ฟรี และมีแบบอักษรให้เลือกมากกว่า 1,000 แบบ
ในส่วนหัวของหน้าเว็บของคุณ ให้ลิงก์ไปยังแบบอักษรของ Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
จากนั้นเพิ่ม CSS เกี่ยวกับตำแหน่งที่จะใช้:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
ตัวอย่างอื่น
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
สร้างคลาสฟอนต์
ในส่วนหัวของหน้าเว็บของคุณ ให้ลิงก์ไปยังแบบอักษรของ Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
จากนั้นสร้างคลาสฟอนต์:
ตัวอย่าง
.w3-sofia {
font-family: Sofia, cursive;
}
ในหน้าเว็บของคุณ ใช้คลาสฟอนต์:
ตัวอย่าง
<p class="w3-sofia">Making the Web!</p>
ทำเว็บ!
ตัวอย่าง
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
ทำเว็บ!
ตัวอย่าง
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
ทำเว็บ!
ตัวอย่าง
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
ทำเว็บ!
ตัวอย่าง
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
ทำเว็บ!