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

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

Adam Argyle

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

บล็อกโพสต์นี้จะอธิบายการใช้ CSS Media Queries กับแบบอักษรแบบปรับเปลี่ยนได้เพื่อปรับแต่งประสบการณ์การอ่านให้ดียิ่งขึ้น คุณปรับแต่งระดับและน้ำหนักแบบอักษรได้โดยใช้ 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 และ Media Query ช่วยให้ประสบความสําเร็จ

เมื่อโหลดแบบอักษรแล้ว คุณสามารถค้นหาค่ากําหนดของผู้ใช้และปรับการตั้งค่าแบบอักษรแบบผันแปรให้ตรงกันได้

การตั้งค่าเมื่อไม่มีค่ากำหนด (ค่าเริ่มต้น)

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

@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 ด้านล่างนี้