วิธีปรับแบบอักษรให้เข้ากับผู้ใช้ ค่ากำหนดพื้นฐาน เพื่อให้ผู้อ่านอ่านเนื้อหาได้อย่างสบายตามากที่สุด
การนำผู้ใช้เข้าสู่กระบวนการออกแบบ เป็นช่วงเวลาที่น่าตื่นเต้นสำหรับผู้ใช้ นักออกแบบและนักพัฒนาซอฟต์แวร์ ผู้ใช้จะไปถึงประสบการณ์การใช้งานและเริ่มต้นได้อย่างราบรื่น การบริโภคเนื้อหา และความต้องการของพวกเขาก็ผสานเข้ากับผลการค้นหาด้านการออกแบบได้อย่างลงตัว
บล็อกโพสต์นี้สำรวจการใช้คิวรี่สื่อ CSS ที่มีแบบอักษรที่ปรับแต่งได้หลากหลาย
การอ่านได้ดียิ่งขึ้น สามารถปรับแต่งคะแนนและน้ำหนักของแบบอักษร
ด้วย font-variation-settings
ทำให้สามารถปรับแต่งไมโครตามค่ากำหนดต่างๆ ได้
และบริบท เช่น ความต้องการใช้โหมดมืดหรือคอนทราสต์สูง เราสามารถดำเนินการ
ค่ากำหนดเหล่านี้ และปรับแต่งแบบอักษร
แบบแปรผันให้เหมาะกับประสบการณ์ของผู้ใช้
- โหมดมืดจะมีการไล่ระดับสีลดลงเล็กน้อย
- คอนทราสต์สูงจะทำให้แบบอักษรหนาขึ้น
- คอนทราสต์ต่ำจะได้แบบอักษรที่บางกว่า
ทำตามเพื่อทำความเข้าใจแต่ละส่วนของ CSS และแบบอักษรตัวแปรที่ช่วยให้ ช่วงเวลาที่มีความหมายนี้!
กำลังตั้งค่า
เพื่อช่วยมุ่งเน้นที่ค่าการตั้งค่า CSS และรูปแบบแบบอักษร เพื่ออ่านและดู ต่อไปนี้คือมาร์กอัปที่คุณสามารถใช้เพื่อดูตัวอย่างผลงานได้
<h1>Variable font weight based on contrast preference</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
labore aliquid ex, dicta corporis.
</p>
ขนาดแบบอักษรจะปรับเปลี่ยนตามความต้องการของผู้ใช้โดยไม่เพิ่ม CSS ใดๆ
นี่เป็นวิดีโอจากการสาธิตอื่นที่แสดงวิธีที่การตั้งค่า font-size
ในหน่วยพิกเซลจะ
สควอชค่ากำหนดของผู้ใช้ และเหตุผลที่คุณควรตั้งค่าขนาดแบบอักษรใน REM
สุดท้าย ในการให้ความสำคัญและสนับสนุนการสาธิต CSS เล็กน้อย:
@layer demo.support {
body {
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
h1 {
text-wrap: balance;
}
}
การตั้งค่าการสาธิตนี้จะช่วยให้คุณเริ่มทดสอบและนำ UX สำหรับการออกแบบตัวอักษรที่สวยงามนี้ไปใช้ได้
กำลังโหลดแบบอักษรของตัวแปร Roboto Flex
กลยุทธ์การปรับเปลี่ยนได้จะขึ้นอยู่กับแบบอักษรที่มีตัวแปรซึ่งมีแกนที่มีความหมายสำหรับ
การกำหนดค่าเอง โดยเฉพาะอย่างยิ่งต้องมี GRAD
และ wght
ผู้ใช้แบบปรับเปลี่ยนได้เป้าหมาย
ในบทความนี้ใช้สำหรับ รูปแบบสี และคอนทราสต์ ซึ่งทั้ง 2 อย่าง
จะปรับแกนเหล่านี้ให้ตรงกับความต้องการของผู้ใช้
โหลดแบบอักษรของตัวแปรโดยใช้ @font-face
API ของ CSS:
@font-face {
font-family: "Roboto Flex";
src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}
ต่อไป ให้ใช้แบบอักษรกับเนื้อหาบางอย่าง CSS ต่อไปนี้ใช้กับ ทุกอย่าง:
@layer demo.support {
body {
font-family: Roboto Flex;
}
}
คุณสมบัติที่กำหนดเองของ CSS และคำค้นหาสื่อเพื่อชัยชนะ
เมื่อโหลดแบบอักษรแล้ว คุณจะค้นหาค่ากำหนดของผู้ใช้และปรับตัวแปรได้ การตั้งค่าแบบอักษรให้ตรงกัน
การตั้งค่าเมื่อไม่มีค่ากำหนด (ค่าเริ่มต้น)
รูปแบบเริ่มต้นต่อไปนี้จะเป็นสไตล์เริ่มต้น หรือเป็นรูปแบบอื่นในการดู ให้กับสไตล์ของผู้ใช้ โดยไม่ต้องมีความชอบใดๆ ทั้งสิ้น
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
}
การตั้งค่าเมื่อค่ากำหนดคือใช้คอนทราสต์สูง
สำหรับผู้ใช้ที่ระบุว่าต้องการใช้คอนทราสต์สูงในระบบ
การตั้งค่า ให้เพิ่มค่า --base-weight
จาก 400
เป็น 700
@layer demo {
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
}
ตอนนี้การอ่านมีคอนทราสต์มากขึ้น
การตั้งค่าเมื่อค่ากำหนดคือคอนทราสต์ต่ำ
สำหรับผู้ใช้ที่ระบุว่าต้องการใช้คอนทราสต์ต่ำในระบบ
การตั้งค่า ให้ลดค่า --base-weight
จาก 400
เป็น 200
@layer demo {
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
}
ตอนนี้คอนทราสต์น้อยลงขณะอ่าน
การตั้งค่าเมื่อกำหนดเป็นโหมดมืด
@layer demo {
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
ตอนนี้ความแตกต่างด้านการรับรู้ของแสงเมื่อมืดกับมืดเมื่อสว่าง ที่เหมาะสม
ทุกอย่างมาอยู่รวมกันแล้ว
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
หรือเพื่อความสนุก คุณสามารถใช้การซ้อน CSS ได้ทั้งหมดดังนี้
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
@media (prefers-contrast: more) { --base-weight: 700 }
@media (prefers-contrast: less) { --base-weight: 200 }
@media (prefers-color-scheme: dark) { --base-grade: -25 }
}
}
ผลลัพธ์ที่ได้คือประสบการณ์การอ่านที่ปรับเปลี่ยนแบบอักษรให้ตรงกับ การตั้งค่าเริ่มต้น ซอร์สโค้ดที่สมบูรณ์มีให้ใน Codepen ด้านล่างนี้