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

Phương thức để điều chỉnh phông chữ theo ngôn ngữ của người dùng để họ cảm thấy thoải mái nhất khi đọc nội dung của bạn.

Adam Argyle

Đưa người dùng vào quá trình thiết kế là thời điểm 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à bắt đầu một cách liền mạch xem nội dung, sở thích của họ được tích hợp phong phú 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 đa phương tiện CSS với phông chữ có thể thay đổi để điều chỉnh trải nghiệm đọc hơn nữa. Có thể tuỳ chỉnh loại phông chữ và độ đậm với font-variation-settings, cho phép điều chỉnh micrô dựa trên nhiều lựa chọn ưu tiên và bối cảnh, chẳng hạn như lựa chọn ưu tiên về chế độ tối hoặc độ tương phản cao. Chúng tôi có thể thực hiện các lựa chọn ưu tiên này và điều chỉnh phông chữ có thể thay đổi cho phù hợp với trải nghiệm người dùng đó.

• Chế độ tối sẽ giảm độ giảm màu một chút.
• Độ tương phản cao sẽ cho phông chữ đậm hơn.
• Độ tương phản thấp sẽ làm phông chữ mỏng hơn.

Thực hiện theo để tìm hiểu từng phần của CSS và phông chữ biến thể cho phép khoảnh khắc ý nghĩa này!

Đang thiết lập

Để giúp tập trung vào CSS và các giá trị cài đặt biến thể phông chữ, nhưng cũng cung cấp cho chúng tôi để đọc và xem nội dung đó, đâ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à một video minh hoạ khác minh hoạ cách thiết lập font-size theo pixel phá bỏ bất kỳ lựa chọn ưu tiên nào 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;
  }
}

Quy trình thiết lập minh hoạ này cho phép bạn bắt đầu thử nghiệm và triển khai trải nghiệm người dùng có kiểu chữ gọn gàng này của chúng tôi.

Đang tải phông chữ biến Roboto Flex

Chiến lược thích ứng phụ thuộc vào phông chữ có thể thay đổi với các trục có ý nghĩa cho tuỳ chỉnh, cụ thể bạn cần có GRAD và wght. 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 của người dùng.

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 tài khoản này 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 biến cài đặt phông chữ phù hợp.

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

Kiểu ban đầu sau đây sẽ là kiểu mặc định, hoặc là một cách khác để vào đó, kiểu cho người dùng mà 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 bạn ưu tiên độ tương phản cao

Đối với những người dùng đã cho biết họ muốn sử dụng chế độ tương phản cao trong hệ thống của họ phần cài đặt, 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 bạn ưu tiên độ tương phản thấp

Đối với những người dùng đã cho biết họ muốn sử dụng chế độ tương phản thấp trong hệ thống của họ 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.

Những chế độ cài đặt khi bạn ưu tiên chế độ tối

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

Giờ đây, có thể cảm nhận được sự khác biệt giữa sáng khi tối so với tối khi bật sáng 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, để cho thú vị là tất cả đều cùng với lồng ghép 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 }
  }
}

Nhờ đó, trải nghiệm đọc sẽ điều chỉnh phông chữ cho phù hợp với tùy chọn. Bạn có thể xem mã nguồn đầy đủ ở bên dưới trong Codepen.