CSS Google Fonts
Google Fonts
หากคุณไม่ต้องการใช้แบบอักษรมาตรฐานใดๆ ใน HTML คุณสามารถใช้ Google Fonts ได้
Google Fonts ใช้งานได้ฟรี และมีแบบอักษรให้เลือกมากกว่า 1,000 แบบ
วิธีใช้ Google Fonts
เพียงเพิ่มลิงก์สไตล์ชีตพิเศษในส่วน <head> แล้วอ้างอิงแบบอักษรใน CSS
ตัวอย่าง
ที่นี่เราต้องการใช้แบบอักษรชื่อ "Sofia" จาก Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
ผลลัพธ์:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
ตัวอย่าง
ที่นี่เราต้องการใช้แบบอักษรชื่อ "Trirong" จาก Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
ผลลัพธ์:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
ตัวอย่าง
ที่นี่ เราต้องการใช้แบบอักษรชื่อ "Audiowide" จาก Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
ผลลัพธ์:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
หมายเหตุ:เมื่อระบุแบบอักษรใน CSS ให้ระบุแบบอักษรสำรองอย่างน้อยหนึ่งแบบอักษรเสมอ (เพื่อหลีกเลี่ยงการทำงานที่ไม่คาดคิด) ดังนั้น ในที่นี้ คุณควรเพิ่มกลุ่มแบบอักษรทั่วไป (เช่น serif หรือ sans-serif) ที่ส่วนท้ายของรายการ
สำหรับรายการ Google Fonts ที่มีอยู่ทั้งหมด โปรดไปที่How To - บทช่วยสอน Google Fonts
ใช้ Google Fonts หลายอัน
หากต้องการใช้แบบอักษร Google หลายแบบ ให้แยกชื่อแบบอักษรด้วยอักขระไปป์ ( |) ดังนี้
ตัวอย่าง
ขอแบบอักษรหลายแบบ:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
ผลลัพธ์:
Audiowide Font
Sofia Font
Trirong Font
หมายเหตุ:การขอแบบอักษรหลายแบบอาจทำให้หน้าเว็บของคุณช้าลง! ดังนั้นจงระวังให้ดี
จัดแต่งทรงผม Google Fonts
แน่นอน คุณสามารถจัดรูปแบบ Google Fonts ได้ตามต้องการด้วย CSS!
ตัวอย่าง
จัดรูปแบบแบบอักษร "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
ผลลัพธ์:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
เปิดใช้งานเอฟเฟกต์แบบอักษร
Google ยังได้เปิดใช้งานเอฟเฟกต์แบบอักษรต่างๆ ที่คุณสามารถใช้ได้
ขั้นแรกให้เพิ่ม Google API จากนั้นเพิ่มชื่อคลาสพิเศษให้กับองค์ประกอบที่จะใช้เอฟเฟกต์พิเศษ ชื่อคลาสจะขึ้นต้นด้วย
และลงท้ายด้วย.effect=effectnamefont-effect-effectname
ตัวอย่าง
เพิ่มเอฟเฟกต์ไฟให้กับแบบอักษร "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
ผลลัพธ์:
Sofia on Fire
หากต้องการขอเอฟเฟกต์แบบอักษรหลายรายการ ให้แยกชื่อเอฟเฟกต์ด้วยอักขระไปป์ ( |) ดังนี้:
ตัวอย่าง
เพิ่มเอฟเฟกต์มากมายให้กับฟอนต์ "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
ผลลัพธ์:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect