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

1. บทนำ

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

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

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

แบบอักษรที่ปรับแต่งได้คืออะไร
วิธีปรับแต่งแบบอักษรด้วยเครื่องมือเหล่านี้
วิธีใช้แบบอักษรที่ปรับแต่งได้กับดีไซน์
วิธีใช้แบบอักษรตัวแปรด้วย Google Fonts API และใน CSS

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

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

ความรู้เกี่ยวกับขนาดตัวอักษร
ความรู้เกี่ยวกับ Figma
มีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS

สิ่งที่คุณต้องมี

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

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

ตั้งค่า

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

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

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

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

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

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

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

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

ตรวจสอบแบบอักษรที่ปรับแต่งได้

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

3. แบบอักษรที่ปรับแต่งได้คืออะไร

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

การแสดงออกทางสุนทรียะและแกน

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

ข้อดี

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

4. ใช้แบบอักษรที่ปรับแต่งได้ในการออกแบบ

เปลี่ยนแกน

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

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

ความกว้างคือผลลัพธ์ของพื้นที่แนวนอนที่ตัวอักษรของแบบอักษรใช้

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

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

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

ดูเดโมแบบอักษรที่ปรับแต่งได้เพื่อลองใช้แกนแบบอักษรที่ปรับแต่งได้นอก Figma

5. เพิ่มความรู้เรื่องสไตล์

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

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

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

คุณสร้างมาตราส่วนประเภท Material เริ่มต้นเป็นสไตล์ Figma ได้ด้วย Material Theme Builder หรือโดยการทำสำเนาชุดออกแบบ M3

6. ใช้กับ UI

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

ดูองค์ประกอบ UI ทางด้านซ้าย การ์ดแรกมีประเภทพืช คำอธิบาย และแท็กหมวดหมู่บางรายการ ส่วนการ์ดที่เหลือจะอธิบายวิธีการดูแลพืช ประเภทพืชมีความเหมาะสมที่จะเป็นบทบาทที่มีความสำคัญสูง ดังนั้นให้ใช้สไตล์ "พาดหัว" ของเรา ตั้งค่าเป็นสิ่งที่เราตั้งค่าไว้ก่อนหน้านี้เป็นบรรทัดแรก การ์ดดูแลยังมีชื่อด้วย แต่ไม่ได้เน้นย้ำในระดับเดียวกัน จึงตั้งค่าเป็นการ์ด "ชื่อ"
คุณสามารถกำหนดรายละเอียดและสำเนาคำสั่งของพืชเป็น "body large" ในขณะที่กำหนดป้ายกำกับหมวดหมู่เป็น "label large"
ทดลองใช้บทบาทต่างๆ และปรับองค์ประกอบ 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`

*Slant (slnt) และ Italic (ital) ใน font-style ไม่น่าเชื่อถือ

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

เราใช้แค่ Roboto มาตลอด แต่ตอนนี้เรามีแบบอักษรให้เลือกมากมายที่ fonts.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>

จดบันทึกข้อกำหนดด้านรูปแบบที่เราตั้งไว้ในแบบฝึกหัดที่แล้วสำหรับบรรทัดแรก ชื่อ เนื้อหา และป้ายกำกับ เมื่อทราบข้อมูลดังกล่าวแล้ว ให้ไปที่หน้าสำหรับ Roboto Flex ตั้งค่าแถบเลื่อนให้ตรงกับข้อกำหนดที่คุณตั้งไว้ใน Figma จากนั้นเลือกรูปแบบนี้สำหรับแต่ละรายการเพื่อเพิ่มลงในลิ้นชักด้านข้าง
ในลิ้นชัก ให้มองหา "ใช้บนเว็บ" ในส่วนรูปแบบที่เลือก การเพิ่มแบบอักษรลงในโค้ดทำได้ 2 วิธี ได้แก่ ใช้ <link> หรือ @import คุณต้องเลือกเพียงรายการเดียว เรามาเลือก @import กัน
คัดลอกจาก @import ไปจนถึงเครื่องหมายอัฒภาค แล้ววางไว้ภายในแท็กสไตล์หลังความคิดเห็นการนำเข้า
เนื่องจากใช้แบบอักษร Roboto Flex เพียงแบบเดียว ให้ตั้งค่า body เพื่อเรียกใช้ชุดแบบอักษรโดยเพิ่ม "กฎ 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 บางอย่างมาจัดรูปแบบ และดูfont-variation-settingsคุณสมบัติ CSS

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

Figma ใช้ font-variation-settings สำหรับความกว้าง (wdth) แทน font-stretch

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

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

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

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

คุณทำได้ดีมากในการใช้ฟอนต์ตัวแปร เรียนรู้วิธีใช้ฟอนต์ตัวแปรในการออกแบบ และนำไปใช้กับเว็บ

หากมีคำถาม โปรดถามเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter

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