Kiểu chữ đơn giản hóa | Thủ thuật CSS

Kiểu chữ chất lỏng là ý tưởng rằng cỡ chữ (và có lẽ các thuộc tính khác của loại, như chiều cao dòng ) thay đổi tùy thuộc vào kích thước màn hình (hoặc có thể là truy vấn vùng chứa nếu chúng ta đã có chúng).

Thủ đoạn cốt lõi đến từ các đơn vị khung nhìn. Theo nghĩa đen, bạn có thể đặt loại trong các đơn vị chế độ xem (ví dụ: cỡ chữ: 4vw ), nhưng sự dao động về kích thước cực kỳ nghiêm trọng đến mức thường không mong muốn. Điều đó đã bị can thiệp bằng cách làm một cái gì đó như cỡ chữ : calc (16px + 1vw) . Nhưng mặc dù chúng tôi rất thích các tính toán, nhưng cách thực hiện phổ biến nhất cuối cùng lại là một phương trình để tính toán tiếng Anh đơn giản:

Tôi muốn loại đi giữa 16px trên màn hình 320px thành 22px trên màn hình 1000px.

Kết thúc như thế này:

  html {
  cỡ chữ: 16px;
}
Màn hình @media và (chiều rộng tối thiểu: 320px) {
  html {
    cỡ chữ: calc (16px + 6 * ((100vw - 320px) / 680));
  }
}
Màn hình @media và (min-width: 1000px) {
  html {
    cỡ chữ: 22px;
  }
}  

Về cơ bản, thiết lập kích thước tối thiểu và tối đa để loại này không bị co lại hoặc phát triển thành bất kỳ thứ gì quá cực đoan. "Khóa CSS" là một thuật ngữ được đặt ra bởi Tim Brown.

Tối thiểu và tối đa bạn nói?! Thật ra, các hàm cho những thứ này đã xâm nhập vào thông số CSS dưới dạng min () và max () .

Vì vậy, chúng tôi có thể đơn giản hóa thiết lập ưa thích của mình ở trên với một lớp lót và duy trì các khóa:

  html {
  cỡ chữ: min (max (16px, 4vw), 22px);
}  

Chúng tôi thực sự có thể muốn dừng lại ở đó bởi vì mặc dù cả Safari (11.1+) và Chrome (79+) đều hỗ trợ điều này vào thời điểm hiện tại, nhưng điều đó cũng rộng như sự hỗ trợ sẽ có được ngày hôm nay. Nói về điều này, có lẽ bạn muốn bỏ qua một tuyên bố cỡ chữ trước khi đặt giá trị dự phòng chấp nhận được mà không có chức năng ưa thích nào.

Nhưng miễn là chúng ta đẩy các giới hạn, có một chức năng khác để đơn giản hóa mọi thứ hơn nữa: kẹp () ! Kẹp có ba giá trị, một min, max và một đơn vị linh hoạt (hoặc tính toán hoặc bất cứ thứ gì) ở giữa mà nó sẽ sử dụng trong trường hợp giá trị nằm giữa min và max. Vì vậy, một lớp lót của chúng tôi thậm chí còn nhỏ hơn:

  cơ thể {
  cỡ chữ: kẹp (16px, 4vw, 22px);
}  

Đó sẽ là Chrome 79+ (thậm chí không có đã giảm xuống ổn định nhưng sẽ sớm hoạt động).