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

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

1. บทนำ

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

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

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

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

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

ในบทนี้ เราจะสร้างแนวคิดการออกแบบพื้นฐานบางอย่าง

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

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

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

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

ตั้งค่า

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

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

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

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

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

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

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

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

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

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

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

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

การแสดงออกและแกนอัตลักษณ์

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

ประโยชน์

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

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

เปลี่ยนแกน

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

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

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

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

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

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

ดูการสาธิตแบบอักษรแบบแปรผันเพื่อเล่นกับแกนแบบอักษรแบบแปรผันนอก Figma

5. เพิ่มสไตล์

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

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

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

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

6. ใช้กับ UI

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

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

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

เราเคยใช้เฉพาะ Roboto แต่ตอนนี้ลองดูแบบอักษรทั้งหมดที่มีให้ใช้งานใน fonts.google.com

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

คัดลอกโค้ดนี้ซึ่งมี 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 เพียงแบบอักษรเดียว ให้ตั้งค่าเนื้อหาให้เรียกใช้ font-family โดยเพิ่ม "กฎ 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