Điều chỉnh kiểu chữ theo sở thích của người dùng bằng CSS

Một phương thức để điều chỉnh phông chữ theo lựa chọn ưu tiên của người dùng, giúp họ thoải mái nhất khi đọc nội dung của bạn.

Adam Argyle

Việc đưa người dùng vào quy trình thiết kế là một khoảng thời gian thú vị đối với người dùng, nhà thiết kế và nhà phát triển. Người dùng có thể bắt đầu trải nghiệm của bạn và liền mạch bắt đầu xem nội dung, những lựa chọn ưu tiên của họ được tích hợp sâu sắc vào kết quả thiết kế.

Bài đăng này trên blog khám phá cách sử dụng các truy vấn nội dung đa phương tiện CSS có phông chữ thay đổi để điều chỉnh trải nghiệm đọc hơn nữa. Bạn có thể tuỳ chỉnh cấp và độ đậm của phông chữ bằng font-variation-settings, cho phép điều chỉnh vi mô theo nhiều tuỳ chọn và ngữ cảnh, chẳng hạn như tuỳ chọn cho chế độ tối hoặc độ tương phản cao. Chúng ta có thể lấy các lựa chọn ưu tiên này và điều chỉnh phông chữ biến đổi cho trải nghiệm người dùng đó.

• Chế độ tối giảm nhẹ độ chuyển màu.
• Độ tương phản cao sẽ có phông chữ đậm hơn.
• Độ tương phản thấp sẽ có phông chữ mỏng hơn.

Hãy theo dõi để hiểu từng phần của CSS và phông chữ biến giúp tạo ra khoảnh khắc ý nghĩa này!

Thiết lập

Để giúp bạn tập trung vào các giá trị cài đặt CSS và biến thể phông chữ, nhưng cũng cung cấp cho chúng ta nội dung để đọc và xem, sau đây là mã đánh dấu mà bạn có thể sử dụng để xem trước tác phẩm:

<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>

Nếu bạn không thêm bất kỳ CSS nào, kích thước phông chữ đã thích ứng với lựa chọn ưu tiên của người dùng. Sau đây là video từ một bản minh hoạ khác cho thấy cách chế độ cài đặt font-size tính bằng pixel sẽ áp dụng mọi lựa chọn ưu tiên của người dùng và lý do bạn nên đặt cỡ chữ theo rems:

Cuối cùng, để căn giữa và hỗ trợ bản minh hoạ, một CSS nhỏ:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

Chế độ thiết lập bản minh hoạ này cho phép bạn bắt đầu thử nghiệm và triển khai tính năng giao diện người dùng kiểu chữ gọn gàng này.

Tải phông chữ biến đổi Roboto Flex

Chiến lược thích ứng phụ thuộc vào phông chữ biến thể có các trục có ý nghĩa để tuỳ chỉnh, cụ thể là bạn cần GRAD và wght. Lựa chọn ưu tiên của người dùng thích ứng mục tiêu trong bài viết này là về bảng phối màu và độ tương phản, cả hai đều sẽ điều chỉnh các trục này cho phù hợp với lựa chọn ưu tiên của người dùng.

Tải phông chữ biến đổi bằng API @font-face của CSS:

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

Tiếp theo, hãy áp dụng phông chữ cho một số nội dung. CSS sau đây áp dụng cho mọi thứ:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

Thuộc tính tuỳ chỉnh CSS và truy vấn nội dung đa phương tiện để giành chiến thắng

Sau khi tải phông chữ, bạn có thể truy vấn các lựa chọn ưu tiên của người dùng và điều chỉnh các chế độ cài đặt phông chữ của biến cho phù hợp.

Chế độ cài đặt khi không có lựa chọn ưu tiên (mặc định)

Các kiểu ban đầu sau đây sẽ là kiểu mặc định hoặc cách khác để xem xét kiểu này là kiểu cho người dùng không có lựa chọn ưu tiên nào.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

Chế độ cài đặt khi lựa chọn ưu tiên là độ tương phản cao

Đối với những người dùng đã cho biết họ muốn sử dụng độ tương phản cao trong chế độ cài đặt hệ thống, hãy tăng giá trị --base-weight từ 400 lên 700:

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

Giờ đây, chế độ đọc sẽ có độ tương phản cao hơn.

Chế độ cài đặt khi lựa chọn ưu tiên là độ tương phản thấp

Đối với những người dùng đã cho biết họ ưu tiên độ tương phản thấp trong phần cài đặt hệ thống, hãy giảm giá trị --base-weight từ 400 xuống 200:

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

Giờ đây, độ tương phản sẽ giảm khi đọc.

Chế độ cài đặt khi người dùng ưu tiên chế độ tối

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Giờ đây, chúng ta có thể nhận biết sự khác biệt trực quan giữa sáng tối và tối khi sáng.

Giờ đây, tất cả đều ở cùng một nơi

@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;
    }
  }
}

Hoặc để vui, hãy cùng nhau lồng 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 }
  }
}

Kết quả là trải nghiệm đọc điều chỉnh phông chữ cho phù hợp với lựa chọn ưu tiên của người dùng. Bạn có thể xem toàn bộ mã nguồn trong Codepen ở bên dưới.