เริ่มต้นใช้งาน 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 ได้ใน 2 ขั้นตอนดังนี้

  1. เพิ่มลิงก์สไตล์ชีตเพื่อขอแบบอักษรเว็บที่ต้องการ: 

    <link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

  2. จัดรูปแบบองค์ประกอบด้วยแบบอักษรของเว็บที่ขอในสไตล์ชีต ดังนี้ 

    .css-selector {
font-family: 'Font Name', serif;
}

    หรือมีรูปแบบแทรกในบรรทัดในองค์ประกอบนั้นๆ ดังนี้ 

    <div style="font-family: 'Font Name', serif;">Your text</div>

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

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

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

https://fonts.googleapis.com/css

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

เช่น หากต้องการขอแบบอักษร Inconsolata ให้ใช้รูปแบบต่อไปนี้

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

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

เช่น หากต้องการขอแบบอักษร Tangerine, 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 รองรับสคริปต์หลายรายการ (เช่น ละติน ซิริลลิก และกรีก) พารามิเตอร์ย่อยควรต่อท้าย 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
Embos emboss font-effect-emboss Chrome, Firefox, Opera, Safari
อัคคีภัย fire font-effect-fire Chrome, Firefox, Opera, Safari
ภาพเคลื่อนไหวในการถ่ายทำ 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 shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
แตกเป็นเสี่ยง splintered font-effect-splintered Chrome และ Safari
คงที่ static font-effect-static Chrome และ Safari
สโตนวอช 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" และ เรียกดูไอเดียต่างๆ ที่มีอยู่บนเว็บอยู่แล้ว!

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