หน้านี้ได้รับการแปลโดย Cloud Translation API

เริ่มต้นใช้งาน Google Fonts API

คู่มือนี้จะอธิบายวิธีใช้ Google Fonts API เพื่อเพิ่มแบบอักษรลงในเว็บ คุณไม่จำเป็นต้องทำโปรแกรมใดๆ ก็เพียงแค่เพิ่มปุ่ม สไตล์ชีตไปยังเอกสาร HTML แล้วอ้างถึงแบบอักษรในรูปแบบ CSS

ตัวอย่างสั้นๆ

ตัวอย่างมีดังนี้ คัดลอกและวาง HTML ต่อไปนี้ลงในไฟล์

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

จากนั้นเปิดไฟล์ในเว็บเบราว์เซอร์รุ่นใหม่ คุณควรเห็นหน้าเว็บที่แสดง ต่อไปนี้ โดยใช้แบบอักษรชื่อ Tangerine

ทำให้เว็บสวยงาม!

ประโยคนี้คือข้อความทั่วไป คุณจึงเปลี่ยนรูปลักษณ์ของข้อความได้โดยใช้ CSS ลอง การเพิ่มเงาให้กับรูปแบบในตัวอย่างก่อนหน้านี้

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

จากนั้นคุณจะเห็นเงาตกกระทบใต้ข้อความดังนี้

ทำให้เว็บสวยงาม!

และนี่เป็นเพียงจุดเริ่มต้นของสิ่งที่คุณทำได้ด้วย Fonts API และ CSS

ภาพรวม

คุณสามารถเริ่มใช้ Google Fonts API ได้ด้วยสองขั้นตอนเท่านั้น:

เพิ่มลิงก์สไตล์ชีตเพื่อขอแบบอักษรเว็บที่ต้องการ:
```
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">
```
จัดรูปแบบองค์ประกอบด้วยแบบอักษรเว็บที่ขอในสไตล์ชีต ดังนี้
```
.css-selector {
font-family: 'Font Name', serif;
}
```
หรือมีรูปแบบอินไลน์ในองค์ประกอบเอง
```
<div style="font-family: 'Font Name', serif;">Your text</div>
```

หมายเหตุ: เมื่อระบุแบบอักษรของเว็บในรูปแบบ CSS ให้ระบุอย่างน้อยที่สุด 1 แบบเสมอ แบบอักษรสำรองสำหรับเว็บที่ปลอดภัยเพื่อหลีกเลี่ยงการทำงานที่ไม่คาดคิด โดยเฉพาะอย่างยิ่ง เพิ่มชื่อแบบอักษรทั่วไปของ CSS เช่น serif หรือ sans-serif ต่อท้ายรายการ เพื่อให้เบราว์เซอร์กลับไปใช้แบบอักษรเริ่มต้นได้หากจำเป็น

โปรดดูรายการแบบอักษรที่ใช้ได้ที่หัวข้อ Google Fonts

การระบุแบบอักษรและสไตล์ใน URL ของสไตล์ชีต

ในการกำหนด URL ที่จะใช้ในลิงก์สไตล์ชีต ให้เริ่มต้นด้วยแท็ก Google URL พื้นฐานของ Fonts API:

https://fonts.googleapis.com/css

จากนั้นเพิ่มพารามิเตอร์ family= ของ URL ที่มีชื่อชุดแบบอักษรอย่างน้อย 1 ชื่อและ รูปแบบ

ตัวอย่างเช่น หากต้องการขอให้ แบบอักษร Inconsolata

https://fonts.googleapis.com/css?family=Inconsolata

หากต้องการขอชุดแบบอักษรจำนวนมาก ให้คั่นชื่อด้วยอักขระไปป์ (|)

เช่น หากต้องการขอแบบอักษร ส้มแดง Inconsolata และ Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

การขอแบบอักษรหลายรายการจะช่วยให้คุณสามารถใช้แบบอักษรทั้งหมดในหน้าเว็บได้ (แต่อย่าใช้จนเกินความจำเป็น หน้าเว็บส่วนใหญ่ไม่ต้องใช้แบบอักษรมากนักและการขอให้แสดง แบบอักษรจำนวนมากอาจทำให้หน้าเว็บโหลดช้า)

Google Fonts API ให้แบบอักษรในเวอร์ชันปกติที่ขอมาโดย "ค่าเริ่มต้น" หากต้องการขอรูปแบบหรือน้ำหนักอื่นๆ ให้ใส่เครื่องหมายโคลอน (:) ต่อท้ายชื่อของ แบบอักษร ตามด้วยรายการรูปแบบหรือน้ำหนักที่คั่นด้วยคอมมา (,)

เช่น

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

หากต้องการดูว่ารูปแบบและน้ำหนักใดใช้ได้กับแบบอักษรหนึ่งๆ ให้ดู รายการแบบอักษรใน Google Fonts

สำหรับแต่ละสไตล์ที่คุณขอ คุณสามารถระบุชื่อนามสกุลหรือ ตัวย่อ; สำหรับน้ำหนัก คุณสามารถเลือกระบุน้ำหนักเป็นตัวเลขได้ ดังนี้

รูปแบบ	ตัวระบุ
ตัวเอียง	`italic` หรือ `i`
ตัวหนา	`bold` หรือ `b` หรือน้ำหนักที่เป็นตัวเลข เช่น 700
ตัวเอียงหนา	`bolditalic` หรือ `bi`

เช่น หากต้องการขอให้ Cantarell ตัวเอียงและ Droid Serif เป็นตัวหนา คุณสามารถใช้ URL ต่อไปนี้

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

ใช้การแสดงแบบอักษร

font-display ช่วยให้คุณ ควบคุมสิ่งที่จะเกิดขึ้นขณะที่แบบอักษรไม่พร้อมใช้งาน การระบุค่าอื่นๆ auto ตามค่าเริ่มต้นจะเหมาะสม

ส่งต่อค่าที่ต้องการในพารามิเตอร์ display ของสตริงการค้นหา

https://fonts.googleapis.com/css?family=Roboto&display=swap

การระบุชุดย่อยของสคริปต์

แบบอักษรบางส่วนใน Google Font Directory สนับสนุนสคริปต์หลายตัว (เช่น ละติน ซีริลลิก และกรีก เป็นต้น) อยู่ในคำสั่งซื้อ เพื่อระบุว่าควรดาวน์โหลดชุดย่อยใด ต่อท้าย URL

ตัวอย่างเช่น หากต้องการขอส่วนย่อยของซีริลลิกของ แบบอักษร Roboto Mono URL จะ เป็น:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

หากต้องการขอส่วนย่อยของภาษากรีก แบบอักษร Roboto Mono URL จะ เป็น:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

หากต้องการขอส่วนย่อยของภาษากรีกและซีริลลิกของ แบบอักษร Roboto Mono URL จะ เป็น:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

โดยชุดย่อยภาษาละตินจะรวมอยู่ด้วยเสมอหากมีและไม่จำเป็นต้องระบุ โปรดทราบว่าหากเบราว์เซอร์ของไคลเอ็นต์รองรับ Unicode-range (http://caniuse.com/#feat=font-unicode-range) ระบบจะไม่สนใจพารามิเตอร์ย่อย เบราว์เซอร์จะเลือกจากส่วนย่อย ที่แบบอักษรรองรับเพื่อดูสิ่งที่ต้องใช้เพื่อแสดงข้อความ

สำหรับรายการแบบอักษรและชุดย่อยของแบบอักษรทั้งหมดที่ใช้ได้ โปรดดูที่ Google Fonts

การเพิ่มประสิทธิภาพคำขอแบบอักษรของคุณ

บ่อยครั้ง เมื่อคุณต้องการใช้แบบอักษรของเว็บ ในเว็บไซต์หรือแอปพลิเคชัน คุณ รู้ล่วงหน้าว่าจะต้องใช้ตัวอักษรใด กรณีนี้มักเกิดขึ้นเมื่อคุณใช้ แบบอักษรเว็บในโลโก้หรือส่วนหัว

ในกรณีเหล่านี้ คุณควรพิจารณาระบุค่า text= ในแบบอักษร URL คำขอ วิธีนี้ช่วยให้ Google แสดงไฟล์แบบอักษรที่ปรับให้เหมาะสมกับ อีกครั้ง ในบางกรณี วิธีนี้สามารถลดขนาดไฟล์แบบอักษรได้สูงสุด 90%

หากต้องการใช้ฟีเจอร์นี้ เพียงเพิ่ม text= ในคำขอ Google Fonts API สำหรับ เช่น ถ้าคุณใช้ Inconsolata สำหรับชื่อบล็อกเพียงอย่างเดียว คุณสามารถใส่ ให้ชื่อเป็นค่า text= คำขอจะมีลักษณะดังนี้ อย่างเช่น:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

คุณควรเข้ารหัส URL ให้กับค่าเช่นเดียวกับสตริงการค้นหาทั้งหมด ดังนี้

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

ฟีเจอร์นี้ยังใช้งานได้กับแบบอักษรสากล ซึ่งช่วยให้คุณระบุ UTF-8 ได้ อักขระ เช่น ¡Hola! จะแสดงเป็น

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

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

เมื่อสร้างส่วนหัวหรือแสดงข้อความในเว็บไซต์ คุณมักจะต้องการ จัดรูปแบบข้อความของคุณอย่างสวยงาม เพื่อให้งานของคุณง่ายขึ้น Google มีคอลเล็กชันเอฟเฟกต์แบบอักษรที่คุณสามารถใช้งานได้อย่างง่ายดาย ข้อความที่แสดงที่สวยงาม เช่น

นี่คือเอฟเฟกต์แบบอักษร

หากต้องการใช้ฟีเจอร์เบต้านี้ เพียงเพิ่ม effect= ใน Google Fonts คำขอ API และเพิ่มชื่อคลาสที่เกี่ยวข้องไปยังองค์ประกอบ HTML ที่คุณ ที่ต้องการให้มีผล ในตัวอย่างข้างต้น เราใช้เอฟเฟกต์แบบอักษร shadow-multiple คำขอจะมีลักษณะดังนี้

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

หากต้องการใช้เอฟเฟกต์ ให้เพิ่มชื่อคลาสที่เกี่ยวข้องลงในองค์ประกอบ HTML ชื่อคลาสที่เกี่ยวข้องจะเป็นชื่อเอฟเฟกต์ที่ขึ้นต้นด้วย font-effect- เสมอ ดังนั้นชื่อชั้นเรียนสำหรับ shadow-multiple จะเป็น font-effect-shadow-multiple:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

คุณขอเอฟเฟกต์ได้หลายรายการโดยการแยกชื่อเอฟเฟกต์ด้วยไปป์ อักขระ (|)

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

ต่อไปนี้เป็นรายการเอฟเฟ็กต์แบบอักษรทั้งหมดที่เรามีให้

ผลกระทบ	ชื่อ API	ชื่อคลาส	การสนับสนุน
แอนะกลิฟ	`anaglyph`	`font-effect-anaglyph`	Chrome, Firefox, Opera, Safari
ป้ายอิฐ	`brick-sign`	`font-effect-brick-sign`	Chrome, Safari
ภาพพิมพ์แคนวาส	`canvas-print`	`font-effect-canvas-print`	Chrome, Safari
เสียงแตก	`crackle`	`font-effect-crackle`	Chrome, Safari
ลดลง	`decaying`	`font-effect-decaying`	Chrome, Safari
การทำลาย	`destruction`	`font-effect-destruction`	Chrome, Safari
หดหู่	`distressed`	`font-effect-distressed`	Chrome, Safari
ไม้ฟูก	`distressed-wood`	`font-effect-distressed-wood`	Chrome, Safari
เอ็มบอส	`emboss`	`font-effect-emboss`	Chrome, Firefox, Opera, Safari
อัคคีภัย	`fire`	`font-effect-fire`	Chrome, Firefox, Opera, Safari
ภาพเคลื่อนไหวใน Fire	`fire-animation`	`font-effect-fire-animation`	Chrome, Firefox, Opera, Safari
ไม่ยืดหยุ่น	`fragile`	`font-effect-fragile`	Chrome, Safari
หญ้า	`grass`	`font-effect-grass`	Chrome, Safari
น้ำแข็ง	`ice`	`font-effect-ice`	Chrome, Safari
ไมโทซิส	`mitosis`	`font-effect-mitosis`	Chrome, Safari
นีออน	`neon`	`font-effect-neon`	Chrome, Firefox, Opera, Safari
โครงร่าง	`outline`	`font-effect-outline`	Chrome, Firefox, Opera, Safari
ใส่สีเขียว	`putting-green`	`font-effect-putting-green`	Chrome, Safari
เหล็กกันกระแทก	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome, Safari
ให้แสงเงาหลายรายการ	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
แยกส่วน	`splintered`	`font-effect-splintered`	Chrome, Safari
คงที่	`static`	`font-effect-static`	Chrome, Safari
Stonewash	`stonewash`	`font-effect-stonewash`	Chrome, Safari
3 มิติ	`3d`	`font-effect-3d`	Chrome, Firefox, Opera, Safari
ลอย 3 มิติ	`3d-float`	`font-effect-3d-float`	Chrome, Firefox, Opera, Safari
วินเทจ	`vintage`	`font-effect-vintage`	Chrome, Safari
วอลเปเปอร์	`wallpaper`	`font-effect-wallpaper`	Chrome, Safari

มีหลากหลายวิธีในการจัดรูปแบบแบบอักษร และทำได้หลายสิ่ง ผ่าน CSS เราเพียงแค่ให้แนวคิด 2-3 รายการเพื่อช่วยคุณเริ่มต้น สำหรับข้อมูลเพิ่มเติม ไอเดีย, ลองค้นหาด้วย Google "เอฟเฟกต์ข้อความ CSS" และ เลือกดูความคิดต่างๆ ที่มีอยู่บนเว็บอยู่แล้ว

อ่านเพิ่มเติม

ดูรายการแบบอักษรทั้งหมดที่ได้จาก Google Fonts API ใน Google Fonts
เรียนรู้วิธีใช้เครื่องมือโหลดแบบอักษรเว็บเพื่อ สามารถควบคุมการโหลดแบบอักษรได้มากขึ้น
เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของ Google Fonts API ใน หน้าการพิจารณาทางเทคนิค