CSS แบบอักษรของ Google

สารบัญ

แสดงสารบัญ

Google แบบอักษร

หากคุณไม่ต้องการใช้แบบอักษรมาตรฐานใดๆ ใน HTML คุณสามารถใช้ Google Fonts ได้

Google Fonts ใช้งานได้ฟรีและมีแบบอักษรให้เลือกมากกว่า 1,000 แบบ

วิธีใช้แบบอักษรของ Google

เพียงเพิ่มลิงก์สไตล์ชีตพิเศษในส่วน <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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

ตัวอย่าง

ที่นี่เราต้องการใช้แบบอักษรชื่อ "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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

ตัวอย่าง

ที่นี่เราต้องการใช้แบบอักษรชื่อ "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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

หมายเหตุ: เมื่อระบุแบบอักษรใน CSS จะต้องระบุที่เสมอ แบบอักษรทางเลือกขั้นต่ำหนึ่งตัว (เพื่อหลีกเลี่ยงพฤติกรรมที่ไม่คาดคิด) ดังนั้น คุณควรเพิ่มตระกูลฟอนต์ทั่วไป (เช่น serif หรือ sans-serif) ที่ส่วนท้ายของรายการด้วย

หากต้องการดูรายชื่อแบบอักษร Google ที่มีอยู่ทั้งหมด โปรดไปที่วิธีการ - บทช่วยสอนแบบอักษรของ Google

ใช้แบบอักษร Google หลายแบบ

หากต้องการใช้แบบอักษร 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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<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>
<body>

<h1 class="a">Audiowide Font</h1>

<h1 class="b">Sofia Font</h1>

<h1 class="c">Trirong Font</h1>

</body>
</html>

หมายเหตุ: การขอแบบอักษรหลายแบบอาจทำให้หน้าเว็บของคุณช้าลง! ดังนั้นควรระวังเรื่องนี้ด้วย

กำหนดสไตล์แบบอักษรของ Google

แน่นอนคุณสามารถจัดสไตล์ 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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<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>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

การเปิดใช้งานเอฟเฟกต์แบบอักษร

Google ได้เปิดใช้งานเอฟเฟกต์แบบอักษรต่างๆ ที่คุณสามารถใช้ได้

ขั้นแรกให้เพิ่ม effect=effectname ลงใน Google API จากนั้นเพิ่มชื่อคลาสพิเศษให้กับองค์ประกอบที่จะใช้พิเศษ ผล. ชื่อคลาสจะขึ้นต้นด้วย font-effect- เสมอ และลงท้ายด้วย ชื่อเอฟเฟกต์

ตัวอย่าง

เพิ่มเอฟเฟกต์ไฟให้กับแบบอักษร "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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<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>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>

หากต้องการขอเอฟเฟ็กต์แบบอักษรหลายรายการ เพียงแยกชื่อเอฟเฟกต์ด้วยอักขระไปป์ (|) เช่นนี้:

ตัวอย่าง

เพิ่มเอฟเฟกต์หลายรายการให้กับแบบอักษร "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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<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>
</html>