4 ขั้นตอนในการใช้ฟอนต์ตัวแปร

Sep 12, 2025
วิธีการ
Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.
(เครดิตรูปภาพ: ในอนาคต)

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

การใช้ Source Sans Pro เป็นตัวอย่างรุ่นตัวแปรของฟอนต์รวมประมาณ 394KB และมีน้ำหนักที่หลากหลาย หากเราต้องใช้น้ำหนักตัวอักษรเหล่านี้เป็นรายบุคคลเป็นไฟล์แบบอักษรมาตรฐานนั้นโดยเฉลี่ย 234kb แต่ละอัน - ส่งผลให้มีขนาดไฟล์รวมประมาณ 1856KB แน่นอนการคำนวณนี้ถือว่าน้ำหนักตัวอักษรทั้งหมดมีอยู่เป็นรายบุคคลเป็นแบบอักษรมาตรฐานซึ่งพวกเขาไม่ได้ (แม้ว่าคุณจะมองหาแบบอักษรปกติเพียงตรวจสอบโพสต์ของเราใน แบบอักษรฟรีที่ดีที่สุด ใช้ได้)

หากเราลบแบบอักษรที่ไม่มีอยู่ในแบบอักษรมาตรฐานขนาดไฟล์รวมยังคงมีขนาดเกือบสามเท่าของแบบอักษรตัวแปรและมีสไตล์น้อยลงอย่างมีนัยสำคัญ แม้ว่าคุณเพียงแค่ต้องการรุ่นที่เป็นตัวหนาและปกติทั่วไปในโครงการเว็บหลายรุ่นฟอนต์ Sans Pro Source Source Sours สองรุ่นยังคงมีขนาดใหญ่กว่าแบบอักษรตัวแปรเดียว สิ่งที่แสดงให้เห็นว่ามีแบบอักษรตัวแปรที่เรามีศักยภาพในการประหยัดเงินจำนวนมากโดยไม่ลดทอนการออกแบบและความคิดสร้างสรรค์ของเรา

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font.

การเปรียบเทียบขนาดไฟล์ของช่วงของน้ำหนักตัวอักษรระหว่างรุ่นมาตรฐานและรุ่นตัวแปรของ Sans Sours Sans Pro (เครดิตรูปภาพ: Mandy Michael)

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

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

ต้องการวางแบบอักษรของคุณในเว็บไซต์ใหม่หรือไม่? สำหรับทรัพยากรการออกแบบเว็บให้ตรงไปถึงเราที่ดีที่สุด สร้างเว็บไซต์ Roundup และ Pick of Top เว็บโฮสติ้ง บริการ หรือสำหรับการอัพเกรดที่เก็บข้อมูลให้ตรวจสอบสิ่งเหล่านี้ การจัดเก็บเมฆ ตัวเลือก.

01. เข้าใจแกนในแบบอักษรตัวแปร

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right.

เมื่อมองถึงการแก้ไขแบบอักษรตัวแปรในแกนน้ำหนักและความกว้างเผยให้เห็นช่วงของการปรับแต่งที่มีอยู่ (เครดิตรูปภาพ: Mandy Michael)

การใช้แบบอักษรตัวแปรใน CSS ของเรานั้นคล้ายกันมากกับวิธีที่เรามักจะใช้แบบอักษรบนเว็บ: การใช้ @ font-face at-rule . อย่างไรก็ตามเราต้องเข้าใจแกนประเภทต่าง ๆ ในแบบอักษรตัวแปรเนื่องจากเป็นตัวกำหนดคุณสมบัติ CSS ที่เราใช้

มีแกนสองประเภทในฟอนต์ตัวแปร: แกนที่ลงทะเบียนและแกนที่กำหนดเอง แกนที่ลงทะเบียนหมายถึงแกนที่เป็นเรื่องธรรมดาพอที่จะเป็นมาตรฐานที่คุ้มค่า ขณะนี้มีห้าแกนที่ลงทะเบียน; น้ำหนักความกว้างเอียงตัวเอียงและแสงและสิ่งเหล่านี้มักถูกแมปกับคุณสมบัติ CSS ที่มีอยู่เช่นตัวอักษร - น้ำหนัก

แกนที่กำหนดเองถูกกำหนดโดยนักออกแบบแบบอักษรสามารถเป็นรูปแบบใด ๆ และต้องการตัวระบุสี่ตัวอักษรภายในไฟล์ฟอนต์ซึ่งสามารถอ้างถึงใน CSS

02. ใช้แกนที่ลงทะเบียน

A range of variable font weights along an axis from light (200) to black (900).

การเปลี่ยนแปลงน้ำหนักที่กำหนดไว้บนแกนจากแสง (200) เป็นสีดำ (900) (เครดิตรูปภาพ: Mandy Michael)

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

เราสามารถตั้งค่าแบบอักษรของเราโดยใช้ @ font-face at-rule ตามปกติเราจะ; การเปลี่ยนแปลงอยู่ในวิธีที่เรากำหนดรูปแบบสำหรับตัวบ่งชี้เช่นตัวอักษรน้ำหนักแบบอักษรยืดตัวอักษรและแบบอักษร ก่อนหน้านี้เราจะตั้งค่าตัวอักษรที่มีน้ำหนัก 200 และกำหนดว่าเป็นรุ่นที่มีแสงสว่างของแบบอักษรเราจะตั้งค่าบล็อกฟอนต์แบบอักษรอื่นสำหรับรุ่นที่เป็นตัวหนาและรุ่นปกติจนกว่าเราจะมีน้ำหนักทั้งหมดที่จำเป็นสำหรับ การออกแบบ ด้วยแบบอักษรตัวแปรเราต้องบล็อกใบหน้าแบบอักษรเดียวเท่านั้น ดังนั้นแทนที่จะใช้หลายอินสแตนซ์เราระบุช่วงของค่าที่สอดคล้องกับค่าต่ำสุดและค่าสูงสุดที่กำหนดไว้ในแกนแบบอักษร 

 @ font-face {
ตัวอักษรตระกูล: "แหล่งที่มา Sans ตัวแปร";
SRC: รูปแบบ URL ("Source-Sans-Variable.woff") ("Woff-Variations");
ฟอนต์ - น้ำหนัก: 200 700;
}

ในตัวอย่างนี้เราตั้งค่าน้ำหนักตัวอักษร 200 ถึง 700 เมื่อช่วงของเราถูกกำหนดเราสามารถเลือกหมายเลขใด ๆ ภายในช่วงนั้นเป็นน้ำหนักตัวอักษรของเราตัวอย่างเช่น 658 ที่สำคัญหากคุณตั้งค่าช่วงน้ำหนักแบบอักษรของคุณเป็น 200 ถึง 700 และ จากนั้นลองนิยามน้ำหนัก 900 แม้ว่าแบบอักษรจะมีน้ำหนัก 900 ที่กำหนดไว้ในแกนของมันคุณจะไม่สามารถใช้งานได้ ช่วงกำหนดสิ่งที่คุณสามารถเข้าถึงใน CSS ของคุณ

03. ตั้งค่าแกนที่กำหนดเอง

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

 H1 {
Font-Family: 'ตัวแปรตัวแปรของฉัน';
แบบอักษร - การตั้งค่าการตั้งค่า: 'WGHT' 375, 'Inli' 88;
}

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

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

 H1 {
  ตัวอักษรตระกูล: "Sans Sans", Sans-Serif;
  ฟอนต์ - น้ำหนัก: 700;
}

@supports (การตั้งค่าแบบอักษร - การตั้งค่า: ปกติ) {
h1 {
 ตัวอักษรตระกูล: "Decovar";
 การตั้งค่าแบบอักษร - การตั้งค่า: "Inli" 88;
 }
}

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

04. รวม JavaScript และแบบอักษรตัวแปร

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts.

แบบอักษรตัวแปรเปิดใช้งานการเปลี่ยนผ่านที่ราบรื่นจากพูดถึงน้ำหนักที่บางเฉียบ สิ่งนี้ช่วยให้คุณสร้างการแปลงที่ราบรื่นโดยใช้ตัวแปร Javascript (เครดิตรูปภาพ: Mandy Michael)

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

ในการสร้างสเกลของเหลวเราต้องจัดแนวค่าและหน่วยสองชุด - น้ำหนักตัวอักษรและขนาดวิวพอร์ต เราสามารถเข้าถึงมุมมองวิวพอร์ตปัจจุบันโดยใช้ window.innerwidth และสร้างสเกลเปอร์เซ็นต์ใหม่โดยการแปลงเป็นช่วง 0-0.99 โดยรวมถึงขนาด Viewport ขั้นต่ำและสูงสุดเราสามารถควบคุมช่วงของเอฟเฟกต์ได้ 

 var viewportscale =
(window.innerwidth - minwindows) / (maxwindows - minwindowsize);

จากนั้นเรากำหนดน้ำหนักตัวอักษรตามขนาดวิวพอร์ตของเรา 

 var fontweightscale = viewportscale * (Minfontweight - maxfontweight) + maxfontweight;

การใช้คุณสมบัติที่กำหนดเอง CSS เราสามารถใช้ค่า JavaScript ของเราเพื่ออัปเดตน้ำหนักตัวอักษรใน CSS ของเรา 

 p.style.setproperty ("- น้ำหนัก", fontweightscale);

เมื่อสิ่งนี้ถูกรวมเข้ากับฟังก์ชั่นและแนบไปกับตัวฟังเหตุการณ์ปรับขนาดเราสามารถอัปเดตน้ำหนักตัวอักษรตามขนาดใหม่ของหน้าต่าง

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

คุณสามารถ ดูรหัส สำหรับสิ่งนี้ใน codepen

บทความนี้มีการเผยแพร่ครั้งแรกในฉบับที่ 318 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา สมัครสมาชิก NET ที่นี่ .

ค้นพบเพิ่มเติมเกี่ยวกับฟอนต์ตัวแปรที่สร้าง CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September.

(เครดิตรูปภาพ: Getty / Bianca Berning / Future)

ในการพูดคุยของเธอในการสร้าง CSS การประชุม CSS ที่มุ่งเน้นสำหรับนักออกแบบเว็บไซต์ที่เกิดขึ้นในวันที่ 26 กันยายน 2019 ที่ Rich Mix, London, Bianca Berning จะสำรวจว่าแบบอักษรตัวแปรสามารถสร้างโอกาสใหม่ ๆ สำหรับคำที่เขียนในสื่อดั้งเดิมรวมถึงใหม่ที่ดื่มด่ำ ประสบการณ์เช่น AR, VR และความเป็นจริงผสม

หากคุณต้องการจับสิ่งนี้และการเจรจาที่ยิ่งใหญ่อื่น ๆ มันคุ้มค่าที่จะหักตั๋วของคุณตอนนี้ หากคุณคว้าคุณมาก่อน 5.00 น. UTC เมื่อวันที่ 15 สิงหาคมคุณสามารถประหยัด£ 50 จ่ายเพียง 199 ปอนด์ + ภาษีมูลค่าเพิ่ม ซื้อตั๋วของคุณตอนนี้ !

บทความที่เกี่ยวข้อง:

  • เทคโนโลยี 3 วิธีกำลังเปลี่ยนประเภท
  • เริ่มต้นด้วยฟอนต์ตัวแปรใน CSS
  • เปลี่ยนประเภทของคุณออนไลน์ด้วยแบบอักษรตัวแปร

วิธีการ - บทความยอดนิยม

คู่มือที่จำเป็นต่อการย่อท้อในศิลปะ

วิธีการ Sep 12, 2025

(เครดิตรูปภาพ: Rob Lunn) หากคุณสงสัยว่าสิ่งที่ม�..

เคล็ดลับการพัฒนาภาพ: เล่าเรื่องด้วยงานศิลปะของคุณ

วิธีการ Sep 12, 2025

(เครดิตภาพ: Simon Baek) การพัฒนาภาพคืออะไร? มันคือ�..

วิธีการสร้างภาพสีน้ำมันดิจิตอลโดยใช้ Artrage

วิธีการ Sep 12, 2025

ภาพวาดโดยใช้แบบดิจิทัลโดยใช้ แท็บเล็ตการว..

เริ่มต้นด้วยการกระจาย

วิธีการ Sep 12, 2025

หนึ่งในวิธีที่ง่ายที่สุดในการนำชีวิตพิเศษให้กับชิ้นส่วนของ ศิ�..

4 เคล็ดลับการเพิ่มประสิทธิภาพภาพที่สำคัญ

วิธีการ Sep 12, 2025

นักพัฒนาที่โชคดีไม่กี่คนและผู้เขียนคนนี้มีโ..

วิธีสร้างเอฟเฟกต์ที่น่าทึ่งด้วยรูปร่าง CSS

วิธีการ Sep 12, 2025

นักพัฒนาส่วนหน้ามีแนวโน้มที่จะคิดในรูปสี่เห..

วิธีการทำบอร์ดผ้าใบของคุณเอง

วิธีการ Sep 12, 2025

การทำให้บอร์ดผ้าใบของคุณเองสนุกรวดเร็วและสา..

การสร้างแบบจำลองยานอวกาศสำหรับการออกแบบการเล่นเกม

วิธีการ Sep 12, 2025

ด้วย พื้นที่แตกหัก เป็นสิ่งที่เป็น - เกมต�..

หมวดหมู่