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

การย้ายไปใช้แบบอักษรตัวแปร

1. บทนำ

อัปเดตครั้งล่าสุด: 11/05/22

ยอมรับความแปรปรวนแบบไดนามิกใน UI ด้วยแบบอักษรที่หลากหลาย ซึ่งช่วยให้การตอบสนองของเลย์เอาต์ ธีม และการช่วยเหลือพิเศษมีประสิทธิภาพมากขึ้น ขณะเดียวกันก็ทำให้แอปทำงานเร็วขึ้นด้วย

สิ่งที่คุณจะได้เรียนรู้

แบบอักษรที่เป็นตัวแปร
คุณจะปรับแต่งประเภทข้อความโดยใช้แท็กดังกล่าวได้อย่างไร
วิธีใช้แบบอักษรที่หลากหลายในการออกแบบของคุณ
วิธีใช้แบบอักษรตัวแปรกับ Google Fonts API และใน CSS

ข้อกำหนดเบื้องต้น

สำหรับห้องทดลองนี้ เราจะต่อยอดจากแนวคิดการออกแบบขั้นพื้นฐาน

ความรู้เกี่ยวกับสเกลประเภท
ความรู้เกี่ยวกับ Figma
ความรู้พื้นฐานเกี่ยวกับ HTML และ CSS

สิ่งที่ต้องมี

บัญชี Figma
ไฟล์ Figma Designlab
ตัวแก้ไขโค้ดที่เลือกสำหรับเว็บ

2. เริ่มต้นใช้งาน

ตั้งค่า

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

ก่อนอื่น ให้ลงชื่อเข้าใช้ Figma หรือสร้างบัญชี

ทำซ้ำจากชุมชน Figma

ไปที่ไฟล์การย้ายข้อมูลไปยังแบบอักษรที่เป็นตัวแปร หรือค้นหาแบบอักษร "การย้ายข้อมูลเป็นตัวแปร" ภายใน Figma Community คลิกทำสำเนาที่มุมขวาบนเพื่อคัดลอกไฟล์ลงในไฟล์

เลย์เอาต์ของไฟล์

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

Codelab นี้จะแนะนำแนวคิดและแบบฝึกหัดเหล่านั้นอย่างละเอียด อ่านไปพร้อมกับ Codelab เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ใหม่ของ Material You

เริ่มตั้งแต่อาร์ตบอร์ด Intro มีปุ่มที่ลิงก์อาร์ตบอร์ดเข้าด้วยกันตามลำดับ หากต้องการเข้าถึงลิงก์ดังกล่าว ให้คลิกที่ปุ่ม

ตรวจหาตัวแปรแบบอักษร

ก่อนที่จะเริ่มต้น เราต้องแน่ใจว่าเรามีแบบอักษรที่ปรับเปลี่ยนได้ ไฟล์นี้ใช้ Roboto Flex ซึ่งมีอยู่ใน Figma อยู่แล้ว หรือคุณจะดาวน์โหลดจาก fonts.google.com ก็ได้

3. แบบอักษรตัวแปรคืออะไร

แบบอักษรตัวแปรคือแบบอักษรรูปแบบใหม่ที่ช่วยให้ผู้ใช้ควบคุมประเภทและไอคอนของตัวเองได้ Roboto Serif และ Roboto Flex คือแบบอักษรใหม่ที่สร้างขึ้นใหม่สำหรับเทคโนโลยีแบบอักษรพิเศษ โดยแต่ละแบบจะมีแกนที่หลากหลาย

การแสดงสีหน้าและแกนด้านความงาม

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

ประโยชน์

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

4. ใช้แบบอักษรที่หลากหลายในการออกแบบ

เปลี่ยนแกน

ลองมาดูพารามิเตอร์ (หรือแกน) ทั้งหมดที่มีอยู่และผลกระทบที่มีต่อพารามิเตอร์กัน เลือกประเภททางด้านขวาและเปิดโมดัลรายละเอียดประเภท (ไอคอนเพิ่มเติม) เพื่อเปิดแถบเลื่อนแกนและดูพารามิเตอร์แต่ละรายการ

น้ำหนักกำหนดความหนาของตัวอักษร โดยให้ความหนาของเส้นที่ครบถ้วนและต่อเนื่อง

ความกว้าง หมายถึงขนาดพื้นที่แนวนอนที่ใช้ไปกับอักขระของตัวพิมพ์

ปรับสไตล์จากตั้งตรงเป็นเอียง หรือที่เรียกว่าการพิมพ์ผิดว่า "เอียง" สไตล์ แม้ว่าจะพบไม่บ่อย แต่การเอียงสามารถทำงานในอีกทิศทางหนึ่ง ซึ่งเรียกว่า "การเอียงย้อนกลับ" ได้ หรือ "เอียงย้อนกลับ" สไตล์

เกรด คือตัวปรับระดับรองสำหรับน้ำหนักออปติคัลของแบบอักษรและไม่เกี่ยวข้องกับแกนน้ำหนัก ทั้งน้ำหนักและคะแนนจะมีผลต่อความหนาของตัวอักษร แต่การปรับโดยใช้คะแนนจะละเอียดยิ่งขึ้นมาก

ขนาดออปติคัล ปรับรูปแบบให้เข้ากับขนาดข้อความที่เจาะจง โดยระบุเป็นจุด สำหรับขนาดที่เล็กลง โดยทั่วไปตัวอักษรจะได้รับการปรับปรุงให้อ่านง่ายขึ้น โดยการเว้นวรรค/การจัดแบ่งที่เล็กเกินไป และเส้นที่หนาและมีรายละเอียดน้อยลง สำหรับขนาดที่ใหญ่กว่า โดยทั่วไปตัวอักษรจะเหมาะสำหรับพาดหัวที่มีเส้นที่บางกว่าและรูปแบบที่มีรายละเอียดมาก รวมถึงน้ำหนักและความกว้างที่มากสุดๆ

ไปที่การสาธิตตัวแปรแบบอักษรเพื่อเล่นกับแกนแบบอักษรที่หลากหลายนอก Figma

5. เพิ่มประสิทธิภาพอย่างมีสไตล์

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

แม้ว่าการกำหนดสเกลของประเภทอาจประกอบด้วยชุดแบบอักษรมากกว่า 1 ชุด แต่เราจะใช้ชุดแบบอักษรเพียงชุดเดียวเพื่อปรับแต่งโมเดลย่อของประเภทเริ่มต้นของ Material เวอร์ชันย่อ

มาเริ่มปรับแต่งสเกลของประเภทกันด้วยเนื้อความกัน ซึ่งช่วยให้เราสามารถตั้งค่าขนาดประเภทฐานของเว็บไซต์ก่อน แล้วปรับขนาดจากจุดนั้นได้ ค่าเริ่มต้นสำหรับหน้าจอขนาดใหญ่คือ 18 pt ซึ่งเลือกไว้และตั้งค่าเป็น Roboto Flex การปรับเปลี่ยนเพื่อให้อ่านได้ง่ายขึ้นนั้นหมายถึงการอัปเดตขนาดและน้ำหนักของแบบอักษร ซึ่งหมายถึงไฟล์แบบอักษรอีกไฟล์หนึ่ง แต่ตอนนี้เราสามารถปรับแต่งแกนได้บางส่วนแล้ว ปรับขนาด คะแนน และน้ำหนักออปติคัล
ดำเนินการต่อด้วยป้ายกำกับ ป้ายกำกับมีประโยชน์มากกว่า และใช้ในบริบทที่สั้นกว่า เช่น ปุ่ม ปรับคะแนนด้วยสายตาเพื่อให้ป้ายกำกับปรากฏอย่างถูกต้องในคอนเทนเนอร์ปุ่มและชิป
ปรับแต่งอย่างต่อเนื่องด้วยชื่อ บรรทัดแรก และดิสเพลย์ ข้อความทั้ง 3 แบบจะใช้กับข้อความที่เน้นระดับปานกลางถึงสูง เช่น ชื่อหน้าและส่วน บรรทัดแรกและดิสเพลย์อาจสื่อความหมายได้ดีกว่า เนื่องจากขนาดและความสำคัญสูง สนุกไปกับทุกแกนที่นี่ได้เลย!
เมื่อเลือกประเภทแล้ว ให้คลิกจุด 4 จุดและเพิ่ม (+) เพื่อตั้งค่ารูปแบบข้อความ ซึ่งจะทำให้การตั้งค่าประเภทที่นำมาใช้ใหม่ได้สอดคล้องกัน

คุณสร้างสเกลประเภท Material เริ่มต้นเป็นรูปแบบ Figma ได้ด้วยเครื่องมือสร้างธีมของวัสดุ หรือทําซ้ำชุดออกแบบ M3

6. ใช้กับ UI

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

ลองดูองค์ประกอบ UI ทางด้านซ้าย การ์ดแรกจะมีประเภทพืช คำอธิบาย และแท็กหมวดหมู่บางส่วน ส่วนการ์ดที่เหลือจะอธิบายวิธีการดูแลต้นไม้ ประเภทของต้นไม้ถือเป็นบทบาทสำคัญ ดังนั้นให้ใช้ "หัวข้อข่าว" ของเรา สไตล์ ตั้งค่าตามที่เราตั้งค่าเป็นบรรทัดแรกก่อนหน้านี้ การ์ดผู้ดูแลมีชื่อเหมือนกัน แต่เน้นคนละชื่อ ดังนั้นให้ตั้งชื่อเป็น "ชื่อ"
สามารถกำหนดรายละเอียดพืชและสำเนาวิธีการให้กับ "รูปร่างใหญ่" และกำหนดป้ายกำกับหมวดหมู่เป็น "ติดป้ายกำกับขนาดใหญ่"
ทดลองใช้บทบาทต่างๆ แล้วปรับองค์ประกอบ UI และการปรับขนาดประเภทเพื่อหาจุดสมดุลที่เหมาะสม

7. ติดตั้งในโค้ด

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

เราจะใช้ HTML และ CSS พื้นฐานสำหรับการใช้งาน และไม่ใช่ MWC หรือเฟรมเวิร์กใดๆ

แบบอักษรที่ปรับแต่งได้ใน Google Fonts

ใช้ Google Fonts เป็นบริการส่งแบบอักษรสำหรับวิธีง่ายๆ ในการใช้งานแบบอักษรมากมาย รวมถึงแบบอักษรที่หลากหลายในเว็บไซต์

ดูแบบอักษรที่พร้อมใช้งานได้โดยไปที่ fonts.google.com ในส่วนการค้นหา ให้เลือกแบบอักษรแสดงเฉพาะตัวแปรที่ต้องการกรอง แบบอักษรแบบต่างๆ ได้แก่ สนามเด็กเล่นบริเวณด้านล่างของหน้าเว็บ ซึ่งคุณสามารถตั้งค่าแถบเลื่อนสำหรับแต่ละแกนที่มีในกลุ่มได้

จัดรูปแบบด้วย CSS

แบบอักษรแต่ละแบบมีแกนสำหรับปรับแต่งไม่เท่ากัน ในปัจจุบัน น้ำหนัก ความกว้าง การเอียง ตัวเอียง และขนาดออปติคัลคือขนาดที่นิยมใช้กันมากที่สุด

ซึ่งสามารถตั้งค่าด้วยคุณสมบัติแบบอักษร CSS พื้นฐานที่มีอยู่ก่อนแบบอักษรตัวแปร แม้ว่าทุกอย่างจะยังไม่ได้รับการรองรับอย่างกว้างขวาง (ตั้งแต่เดือนพฤษภาคม 2022) แต่ก็ตั้งค่าแกนทุกแกนได้อย่างน่าเชื่อถือโดยใช้พร็อพเพอร์ตี้ใหม่ font-variation-settings

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*การใช้ตัวอักษรเอียง (slnt) และตัวเอียง (ital) ของแบบอักษรนั้นไม่น่าเชื่อถือ

8. นำเข้าด้วย Google Fonts API

เราใช้ Roboto เท่านั้น แต่ดูแบบอักษรทั้งหมดที่เรามีให้ในตอนนี้บน Font.google.com

เราจะยึด Roboto ไปก่อนใน Codelab ที่เหลือ และปรับแต่งประเภทในการ์ดต่อไปนี้โดยอิงตามการทดลองครั้งก่อน

คัดลอกโค้ดนี้ที่มี UI ตัวอย่างการ์ดไปยัง IDE เว็บที่คุณต้องการ

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

อย่าลืมดูข้อมูลจำเพาะของสไตล์ที่เรากำหนดไว้ในแบบฝึกหัดล่าสุดสำหรับ headline, title, body และ label ดังนั้น ให้ไปที่หน้าของ Roboto Flex ตั้งค่าแถบเลื่อนให้ตรงกับข้อกำหนดที่คุณกำหนดไว้ใน Figma จากนั้นเลือกรูปแบบนี้สำหรับแต่ละตัวเลือกเพื่อเพิ่มลงในลิ้นชักด้านข้าง
มองหา "ใช้บนเว็บ" ภายในลิ้นชัก ภายใต้รูปแบบที่เลือก การเพิ่มแบบอักษรในโค้ดทำได้ 2 วิธีดังนี้ <link> หรือ @import มีแค่ไฟล์เดียว ลองเลือก @import
คัดลอกจาก @นำเข้า ไปยังเครื่องหมายเซมิโคลอน แล้ววางไว้ภายในแท็กรูปแบบหลังความคิดเห็นนำเข้า
เนื่องจาก Roboto Flex เป็นแบบอักษรที่ใช้เพียงแบบอักษรเดียว ให้ตั้งค่าเนื้อหาให้เรียกชุดแบบอักษรโดยการเพิ่ม "กฎ CSS เพื่อระบุตระกูล" ที่รวมอยู่ในรหัสการนำเข้า

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

ซึ่งจะนำเข้าชุดแบบอักษรและรูปแบบที่เลือก แต่การใช้ช่วงแกนจะช่วยให้คุณใช้ช่วงของรูปแบบที่ต่อเนื่องแทนแต่ละสไตล์ได้ ในการสร้างช่วง ให้ผนวกค่า 2 ค่าด้วย .. (เช่น 100..900) โปรดตรวจสอบว่าคุณเพิ่มเฉพาะช่วงที่มีอยู่ในแถบเลื่อนของแบบอักษร มิฉะนั้นจะโหลดไม่ถูกต้อง

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

9. คุณสมบัติของแบบอักษรของตัวแปร CSS

เมื่อนำเข้าแบบอักษรแล้ว ให้ข้ามไปที่ Figma เพื่อดึงคุณสมบัติ CSS บางรายการเพื่อจัดรูปแบบ และดูที่พร็อพเพอร์ตี้ CSS font-variation-settings

การเริ่มที่บรรทัดแรก เลือก h1 ในแผงด้านขวาแล้ว เลือกแท็บตรวจสอบที่ด้านบน ซึ่งจะเปลี่ยนแผงเป็นโหมดตรวจสอบโค้ดสำหรับการส่งต่อนักพัฒนาซอฟต์แวร์ โค้ดเป็นส่วนสุดท้าย
เปลี่ยนรูปแบบเมนูแบบเลื่อนลงเป็น CSS หากยังไม่ได้เปลี่ยน หากใช้แล้ว แอตทริบิวต์มาตรฐานจะแสดงอยู่ในรายการ (font-weight, font-stretch, font-style, font-optical-sizing) ตามด้วย font-variation-settings ระดับต่ำซึ่งมีแกนที่กำหนดเองซึ่งไม่ได้ลงทะเบียน โปรดใช้แอตทริบิวต์มาตรฐาน ก่อนที่จะเปลี่ยนเป็น font-variation-settings

Figma ใช้การตั้งค่ารูปแบบตัวอักษรสำหรับความกว้าง (wdth) แทนการขยายแบบอักษร

คัดลอกโค้ด CSS นี้ที่เกี่ยวข้องกับประเภทเพื่อจัดรูปแบบตัวเลือก h1

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

คัดลอกรูปแบบของชื่อการ์ดการดูแลไปยัง h2 ได้ ให้ทำแบบเดียวกันนี้กับข้อความเนื้อหา โดยการคัดลอกไปยัง p คัดลอกรูปแบบป้ายกำกับไปยัง .label ได้

10. ขอแสดงความยินดี

เยี่ยมมากคุณสามารถนำแบบอักษรที่หลากหลายไปใช้ เรียนรู้วิธีใช้แบบอักษรเหล่านั้นในการออกแบบ และนำแบบอักษรเหล่านั้นมาใช้บนเว็บ

หากมีข้อสงสัย โปรดติดต่อเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter

โปรดติดตามเนื้อหาการออกแบบและบทแนะนำเพิ่มเติมได้ที่ youtube.com/MaterialDesign