Đ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 trên blog này khám phá việc sử dụng truy vấn nội dung đa phương tiện CSS với phông chữ biến để điều chỉnh trải nghiệm đọc tốt 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ẽ cho phông chữ đậm hơn.
• Độ tương phản thấp sẽ có phông chữ mỏng hơn.

Hãy cùng tìm hiểu từng phần của CSS và phông chữ biến thể 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>

Không cần thêm 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. Dưới đây là video của một bản minh hoạ khác cho thấy cách thiết lập font-size theo pixel sẽ làm mất mọi lựa chọn ưu tiên của người dùng và lý do bạn nên thiết lập kích thước phông chữ theo rem:

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à dành cho 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 mà người dùng mong muốn.

Tải phông chữ có thể thay đổ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;
  }
}

Các truy vấn phương tiện và thuộc tính tuỳ chỉnh CSS để 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 là một cách khác để xem, là kiểu cho người dùng không có bất kỳ 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, độ tương phản sẽ cao hơn khi đọc.

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ẽ thấp hơn 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, sự khác biệt về nhận thức của màu sáng trên nền tối so với màu tối trên nền sáng đã được tính đến.

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.