การปรับตัวอักษรให้เข้ากับความต้องการของผู้ใช้ด้วย CSS

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

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

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

  • โหมดมืดจะมีการไล่ระดับสีลดลงเล็กน้อย
  • คอนทราสต์สูงจะทำให้แบบอักษรหนาขึ้น
  • คอนทราสต์ต่ำจะได้แบบอักษรที่บางกว่า
https://codepen.io/argyleink/pen/mdQrqvj

ทำตามเพื่อทำความเข้าใจแต่ละส่วนของ 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;
  }
}

ต
ตัวอย่างภาพหน้าจอของการสาธิตจนถึงขณะนี้ ด้วยแบบอักษรใน Roboto Flex ทั้ง 2 ช่องทางแล้ว
ธีมมืดและสว่าง

คุณสมบัติที่กำหนดเองของ 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 ด้านล่างนี้