Trang này được dịch bởi Cloud Translation API.

Kiểu chữ linh hoạt và thích ứng bằng các tính năng CSS cơ bản

Miriam Suzanne

Xuất bản: Ngày 16 tháng 12 năm 2025

Thiết kế web thích ứng là một phương pháp xây dựng trang web có giao diện bắt mắt và hoạt động hiệu quả trên nhiều trình duyệt, kích thước khung nhìn, thiết bị và lựa chọn ưu tiên của người dùng. Khi áp dụng cho kiểu chữ, mối quan tâm chính thường là điều chỉnh font-size dựa trên chiều rộng của trình duyệt. Điều này cũng có thể ảnh hưởng đến các giá trị khoảng cách như line-height và margin.

Là nhà thiết kế, bạn nên nghĩ đến không gian có sẵn trong trình duyệt và điều chỉnh kiểu chữ cho phù hợp. Bạn cũng cần nhớ rằng mỗi người dùng sẽ có nhu cầu khác nhau về font-size trên nhiều thiết bị, tuỳ thuộc vào hoàn cảnh cá nhân mà bạn không thể biết hoặc kiểm soát. Vì vậy, việc làm bất cứ điều gì khiến người dùng mất quyền kiểm soát kết quả cuối cùng đều rất nguy hiểm. Có 2 yếu tố đầu vào chính mà người dùng có thể sử dụng để ảnh hưởng đến kích thước phông chữ trong khi duyệt web:

Cung cấp lựa chọn ưu tiên font-size mặc định trên tất cả các trang web.
Phóng to hoặc thu nhỏ theo từng trang web.

Mục tiêu của bản minh hoạ này là tạo kiểu chữ thích ứng với cả kích thước khung nhìn của trình duyệt và cả thông tin đầu vào của người dùng. Tuy nhiên, điều quan trọng là bạn phải hiểu rằng chữ càng phản hồi nhiều hơn với khung hiển thị thì càng phản hồi ít hơn với lựa chọn ưu tiên của người dùng. Nếu bạn định triển khai kiểu chữ thích ứng, thì bạn phải làm việc này một cách cẩn thận và kiểm tra để đảm bảo kết quả vẫn có thể truy cập được.

Đàm phán về một `font-size` cơ bản dựa trên lựa chọn ưu tiên của người dùng

Bước đầu tiên để xác định mọi kiểu chữ trực tuyến là thương lượng cỡ chữ ban đầu dựa trên lựa chọn ưu tiên font-size của người dùng. Đây sẽ là phông chữ được dùng cho phần lớn văn bản trên trang và là cơ sở cho các cỡ chữ khác như tiêu đề. Lựa chọn đơn giản nhất ở đây là cho phép người dùng kiểm soát hoàn toàn bằng cách sử dụng 1em mà không cần điều chỉnh. Khi bạn không đặt bất kỳ giá trị font-size nào khác, 1em sẽ đề cập đến lựa chọn ưu tiên của người dùng. Ở đầu kia của phổ, việc đặt một font-size bằng pixel hoặc các đơn vị tuyệt đối khác (và thậm chí cả các đơn vị tương đối với khung nhìn) sẽ hoàn toàn ghi đè người dùng, điều này cần tránh.

Tuy nhiên, mỗi trường hợp sử dụng sẽ đòi hỏi một kiểu chữ riêng. Một bài viết có thể dễ đọc hơn khi có văn bản lớn, trong khi các trang web có nhiều dữ liệu có thể cần một thiết kế nhỏ gọn hơn với văn bản nhỏ hơn. Trong cả hai trường hợp, bạn có thể đề xuất một giá trị mặc định phù hợp với thiết kế, đồng thời vẫn cho phép người dùng điều chỉnh kết quả dựa trên tình huống riêng của họ.

Cách 1: tính toán hệ số nhân dựa trên các giả định

Một giải pháp thoả hiệp phổ biến là xác định một font-size được điều chỉnh theo đơn vị em hoặc %, tương ứng với font-size mặc định của người dùng. Nhìn chung, phương pháp này bắt đầu bằng giả định rằng các trình duyệt cung cấp chế độ mặc định 16px và hầu hết người dùng sẽ giữ nguyên chế độ mặc định đó. Nếu bạn cho rằng cỡ chữ 20px sẽ phù hợp hơn với trang web của mình, thì font-size của 1.25em hoặc 125% thường sẽ mang lại kết quả mà bạn muốn:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

Bạn cũng có thể sử dụng hàm calc() tại đây để cho thấy phép toán, nhưng bạn vẫn phải biết phương trình là gì – kích thước mục tiêu, chia cho kích thước dự kiến, nhân với 1em:

html {
  font-size: calc(20 / 16 * 1em);
}

Những người dùng có lựa chọn ưu tiên lớn hơn hoặc nhỏ hơn sẽ có khả năng ảnh hưởng đến kết quả, vì giá trị mặc định của bạn hiện liên quan đến giá trị mặc định của họ – trong trường hợp này là gấp 1,25 lần giá trị mặc định của họ. Tuy nhiên, điều này có thể gây khó hiểu nếu cả bạn và người dùng đều yêu cầu giá trị mặc định 20px và kết quả là 25px (thời gian mặc định đã điều chỉnh của họ nhân với 1, 25) – một kích thước mà không ai yêu cầu.

Lựa chọn 2: để `clamp()` làm việc

Một phương pháp tinh tế hơn liên quan đến các hàm so sánh CSS mà không cần đến toán học! Thay vì giả định 1em bằng 16px và thực hiện các lượt chuyển đổi không đáng tin cậy từ px sang em, bạn có thể coi 1em là một biến đề cập đến lựa chọn ưu tiên của người dùng. Bất kể giá trị pixel mà 1em đại diện là gì, font-size của max(1em, 20px) sẽ luôn trả về giá trị lớn hơn trong lựa chọn ưu tiên về thiết kế của bạn (20px) và lựa chọn ưu tiên của người dùng (1em). Điều này cho phép người dùng chọn kích thước phông chữ lớn hơn, nhưng không nhỏ hơn.

Bằng cách chuyển sang hàm clamp(), bạn có thể cho phép người dùng điều chỉnh tỷ lệ theo cả hai hướng khi kích thước ưu tiên của họ khác quá xa so với kích thước mặc định mà bạn đã chọn. Ví dụ: font-size của clamp(1em, 20px, 1.25em) sẽ mặc định là 20px miễn là giá trị đó lớn hơn giá trị mặc định của người dùng, nhưng không được lớn hơn 125% giá trị mặc định của họ.

Điều này cho phép thiết kế của bạn được ưu tiên khi gần với lựa chọn ưu tiên của người dùng, nhưng người dùng vẫn được ưu tiên khi lựa chọn ưu tiên của họ nằm ngoài phạm vi được chỉ định. Không có phép tính chuyển đổi, không có giả định về kích thước ưu tiên của người dùng và không có phép nhân giá trị của nhà thiết kế và người dùng.

Bằng cách đặt tham số này làm font-size gốc trên phần tử html, giờ đây, bạn có thể tham chiếu 1rem ở bất kỳ vị trí nào trên trang web, dưới dạng kích thước cơ sở đã thương lượng.

Thêm khả năng phản hồi

Để làm cho font-size này thích ứng với khung hiển thị, bạn có thể thêm các điểm ngắt truy vấn nội dung nghe nhìn (hoặc truy vấn vùng chứa). Ví dụ: bạn có thể thay đổi giá trị bị giới hạn tuỳ thuộc vào kích thước màn hình:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

Lựa chọn khác là thêm các đơn vị khung hiển thị hoặc vùng chứa vào giá trị cơ sở tĩnh:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

Đơn vị vw (chiều rộng khung nhìn) hoặc vi (kích thước nội tuyến của khung nhìn) biểu thị 1% tổng khung nhìn – phần trình duyệt hiển thị trang web của bạn. Tương tự, các đơn vị cqw và cqi biểu thị 1% của một vùng chứa có kích thước nội tuyến trên trang. Hãy xem bản minh hoạ về các truy vấn và đơn vị vùng chứa để biết thêm thông tin chi tiết.

Phương pháp này thường được gọi là kiểu chữ linh hoạt, vì sự thay đổi về font-size là hằng số trong một phạm vi chiều rộng khung hiển thị, thay vì nhảy từ giá trị này sang giá trị khác tại các điểm ngắt phương tiện hoặc vùng chứa. Tuy nhiên, đừng bị phân tâm bởi độ mượt của hiệu ứng chuyển đổi. Sự khác biệt đó thường chỉ xuất hiện trong quá trình kiểm thử, nếu bạn điều chỉnh kích thước cửa sổ một cách mượt mà. Người dùng hiếm khi (nếu có) thấy hiệu ứng đó. Mặc dù người dùng có thể thường xuyên thay đổi kích thước của trình duyệt hoặc mức thu phóng, nhưng họ sẽ phải điều chỉnh những thông số đó một cách chậm rãi và linh hoạt để nhận thấy sự khác biệt giữa một điểm ngắt và một đơn vị khung nhìn. Chế độ này chỉ ảnh hưởng đến hiệu ứng chuyển đổi, chứ không ảnh hưởng đến kết quả sau khi đổi kích thước.

Ưu điểm chính của tính năng định cỡ phông chữ linh hoạt là bạn không cần phải tính toán hoặc chỉ định điểm ngắt theo cách thủ công, đồng thời cung cấp kết quả được nội suy ở mọi kích thước nhất định. Bạn chỉ cần đặt điểm bắt đầu (16px) và tốc độ thay đổi (0.25vw sẽ tăng 0.25px trong font-size cho mỗi lần tăng 100px trong khung hiển thị), đồng thời có thể đặt giá trị tối thiểu và tối đa. Khi khung hiển thị có chiều rộng 1000px, font-size sẽ là 16px + 2.5px hoặc 18.5px – nhưng trình duyệt sẽ xử lý hoàn toàn phép tính đó. Đây là phương pháp được dùng trong bản minh hoạ, sử dụng các đơn vị cqi để thể hiện khả năng thích ứng dựa trên vùng chứa. Khi được dùng trên phần tử gốc (html), nơi không có vùng chứa được xác định, các đơn vị cqi vẫn đề cập đến kích thước khung nhìn.

Nếu bạn muốn suy nghĩ theo font-size được chỉ định ở một kích thước khung hiển thị nhất định, hãy cân nhắc sử dụng phương pháp truy vấn nội dung nghe nhìn trực tiếp hơn (rõ ràng hơn một chút). Mọi thứ trở nên phức tạp khi bạn cố gắng tính toán các đơn vị khung nhìn dựa trên các điểm ngắt dự kiến. Nhiều người làm việc này bằng cách sao chép và dán các giá trị từ các công cụ bên thứ ba, nhưng mã kết quả sẽ khó hiểu hoặc thay đổi trực tiếp hơn nhiều. Nhìn chung, với CSS, lựa chọn tốt nhất là lựa chọn thể hiện rõ ràng nhất ý định của bạn.

Cảnh báo: Các thay đổi về khung hiển thị không phải lúc nào cũng có nghĩa là giống nhau!

Mặc dù các truy vấn nội dung nghe nhìn và đơn vị vi được áp dụng theo những cách khác nhau, nhưng cả hai phương pháp đều dựa trên cùng một phép đo khung hiển thị. Nếu khung nhìn có chiều rộng là 600px, thì 100vw sẽ bằng 600px và các kiểu trong truy vấn nội dung nghe nhìn (width > 500px) sẽ được áp dụng.

Nhưng khung nhìn có chiều rộng 600px nghĩa là sao? Trên thực tế, pixel không phải là một kích thước cố định với một ý nghĩa duy nhất trong mọi trường hợp. Mặc dù có vẻ tự nhiên khi một khung hiển thị có ít pixel hơn nằm trên màn hình nhỏ (chẳng hạn như điện thoại) hoặc trong cửa sổ trình duyệt hẹp, nhưng đó không phải là giả định đáng tin cậy. Trên thực tế, việc phóng to và giảm kích thước cửa sổ trình duyệt sẽ có tác động như nhau đến chiều rộng khung nhìn được đo. Một thao tác (thu phóng) thay đổi kích thước của một pixel, trong khi thao tác còn lại (đổi kích thước) thay đổi kích thước của chính trình duyệt – nhưng cả hai thao tác này đều thay đổi số lượng pixel theo chiều rộng của trình duyệt. Thông tin chúng ta nhận được từ phép đo khung hiển thị là mối quan hệ giữa kích thước pixel hiện tại và cửa sổ trình duyệt hiện tại.

Đối với người dùng, thao tác thu phóng và đổi kích thước đều phục vụ một mục đích rất khác nhau. Người dùng thay đổi mức thu phóng đang cố gắng phóng to hoặc thu nhỏ nội dung của trang, nhưng người dùng thay đổi kích thước trình duyệt chỉ đang quản lý không gian trên các màn hình khác nhau. Mặc dù ý định của người dùng là khác nhau, nhưng kết quả đo lường CSS vẫn giống nhau. Khi cửa sổ nhỏ hơn hoặc pixel lớn hơn, sẽ có ít pixel hơn trên chiều rộng của trình duyệt.

Sự thiếu đồng bộ đó khiến kiểu chữ thích ứng trở nên không đáng tin cậy. Nếu bạn chỉ đặt văn bản để đổi kích thước dựa trên khung hiển thị hoặc vùng chứa, thì thao tác thu phóng của người dùng sẽ không có tác dụng!

Việc thay đổi giá trị của đơn vị tương đối với khung nhìn thành 1vw hoặc 100vw sẽ thay đổi mối quan hệ chính xác giữa kích thước phông chữ và khung nhìn. Phông chữ 1vw sẽ tăng 1px cho mỗi 100px kích thước khung nhìn, trong khi phông chữ 100vw sẽ có kích thước chính xác bằng với khung nhìn. Bạn có thể thay đổi giá trị đó để phông chữ tăng kích thước chậm hơn hoặc nhanh hơn so với trình duyệt. Nhưng mọi giá trị tương đối của khung hiển thị sẽ vẫn không đổi khi người dùng phóng to hoặc thu nhỏ – hoàn toàn không phản hồi các chế độ kiểm soát của người dùng.

Tương tự, cả 1vw và 100vw đều không tính đến font-size mặc định của người dùng.

Việc chỉ sử dụng các đơn vị tương đối với vùng hiển thị hoặc vùng chứa cho font-size luôn gây khó chịu cho người dùng. Khi font-size hoàn toàn thích ứng với vùng chứa của nó, thì nó cũng không thể thích ứng với các chế độ cài đặt mặc định hoặc điều chỉnh của người dùng. Ngay cả khi có ý định và biện pháp bảo vệ tốt nhất, bạn cũng nên tránh tước bỏ quyền kiểm soát cuối cùng của người dùng đối với font-size. Điều này không chỉ mang lại trải nghiệm người dùng kém mà còn có thể vi phạm hướng dẫn về khả năng tiếp cận (thường là yêu cầu bắt buộc theo luật). Cụ thể, mục 1.4.4 của Nguyên tắc về khả năng tiếp cận nội dung trên web yêu cầu "văn bản có thể được đổi kích thước mà không cần công nghệ hỗ trợ lên đến 200%".

Cách đảm bảo các giá trị `font-size` phản hồi khi thu phóng

Để đảm bảo rằng font-size tương đối với khung hiển thị phản hồi với thao tác thu phóng, bạn phải áp dụng giá trị tương đối với khung hiển thị làm giá trị điều chỉnh cho một số giá trị khác. Bạn có thể làm điều đó trong CSS bằng cách sử dụng hàm calc() hoặc bất kỳ hàm toán học nào khác chấp nhận các phép tính, chẳng hạn như min(), max() và clamp(). Một font-size có kích thước calc(16px + 1vw) dựa trên cả kích thước khung nhìn và kích thước hiện tại (tương đối theo mức thu phóng) của một pixel. Mặc dù đơn vị vw sẽ không bị ảnh hưởng bởi chế độ thu phóng, nhưng giá trị cơ sở sẽ bị ảnh hưởng.

Kết quả là một font-size phản hồi cả kích thước khung hiển thị và chế độ cài đặt thu phóng của người dùng. Nếu người dùng phóng to đến 200%, giá trị cơ sở sẽ hiển thị lớn gấp đôi (32px), trong khi giá trị thích ứng vẫn không thay đổi. Khung nhìn 1000px ban đầu sẽ cho bạn font-size là 16px + 10px = 26px, nhưng ở mức thu phóng 200%, kích thước phông chữ sẽ chỉ tăng lên 42px, chỉ hơn 160%. Điều đó có vẻ không phải là một vấn đề nghiêm trọng, nhưng font-size càng dựa trên khung hiển thị thì tính năng thu phóng càng kém hiệu quả.

Trên màn hình nhỏ, font-size sẽ chủ yếu đến từ giá trị pixel cơ bản và sẽ phản hồi tốt khi thu phóng. Nhưng trên màn hình lớn hơn, việc định cỡ khung hiển thị sẽ trở thành một phần lớn hơn của kích thước phông chữ được kết xuất, khiến tính năng thu phóng kém hiệu quả hơn. Điều này trở nên đặc biệt nguy hiểm tại thời điểm mà mức thu phóng 500% (mức tối đa trong hầu hết các trình duyệt) không còn có thể tăng kích thước phông chữ thêm 200% theo yêu cầu của WCAG 1.4.4. Tuy nhiên, ngay cả trước thời điểm đó, việc thu phóng không hiệu quả có thể gây khó chịu.

Biểu đồ cho thấy kích thước phông chữ và hiệu quả thu phóng so với chiều rộng khung hiển thị. Cỡ chữ (được tính là "calc(17px + 2,5vw)") tăng tuyến tính theo chiều rộng khung nhìn. Đường thu phóng 500% (tượng trưng cho mức thu phóng tối đa có thể) cho thấy tính hiệu quả của việc thu phóng sẽ giảm khi chiều rộng khung nhìn tăng lên, không thể tăng cỡ chữ thêm 200% khi chiều rộng khung nhìn vượt quá 2040px. — Trục ngang biểu thị kích thước khung nhìn, từ `0` đến `2600px` chiều rộng. Trục tung cho `font-size` cũng tính bằng pixel, cho thấy kết quả của `calc(17px + 2.5vw)`. Đường thu phóng `500%` sử dụng cùng một trục hoành có chiều rộng khung hiển thị, nhưng coi trục tung là một tỷ lệ phần trăm.

Ở cạnh bên trái của biểu đồ (chiều rộng khung nhìn 0), mức thu phóng 500% có hiệu quả tối đa. Tuy nhiên, hiệu quả đó sẽ giảm nhanh chóng khi kích thước trình duyệt tăng lên và các đơn vị khung nhìn (không thể thu phóng) trở thành một yếu tố lớn hơn trong font-size. Khi trình duyệt có chiều rộng 2040px, mức thu phóng tối đa 500% chỉ có thể tăng 200% cỡ chữ. Sau thời điểm đó, bạn sẽ không thể 200% phóng to phông chữ một cách hiệu quả nữa.

Bằng cách di chuyển phép tính này vào một hàm clamp(), với các giá trị tối thiểu và tối đa, bạn có thể thực thi các ranh giới để đảm bảo văn bản có thể thu phóng. Theo Maxwell Barvian:

Nếu cỡ chữ tối đa nhỏ hơn hoặc bằng 2,5 lần cỡ chữ tối thiểu, thì văn bản sẽ luôn đáp ứng WCAG SC 1.4.4, ít nhất là trên tất cả các trình duyệt hiện đại.

Vì các truy vấn @media và @container dựa trên cùng một phép đo như các đơn vị vw và cqw, nên bạn có thể áp dụng cùng một logic khi sử dụng điểm ngắt để thay đổi kích thước phông chữ. Khi kích thước tăng quá nhiều, tính năng thu phóng sẽ không hiệu quả. Bạn có thể thử nghiệm cách các giá trị này tương tác trong hình ảnh trực quan sau:

Cách đảm bảo các giá trị `font-size` phản hồi theo chế độ cài đặt mặc định của người dùng

Tuy nhiên, calc(16px + 1vw) vẫn không phản hồi chế độ cài đặt phông chữ mặc định của người dùng. Để đạt được điều đó, bạn có thể đặt giá trị cơ sở (hoặc giá trị tối thiểu và tối đa) bằng cách sử dụng đơn vị em hoặc rem thay vì px. Tổng hợp lại, bạn sẽ nhận được kết quả quen thuộc khớp với bản minh hoạ được liên kết:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

Lưu ý:

Cả giá trị tối thiểu và tối đa đều sử dụng đơn vị em, dựa trên lựa chọn ưu tiên của người dùng (và phản hồi theo mức thu phóng).
Giá trị vw bổ sung được giữ ở mức tối thiểu để chế độ thu phóng không bị ảnh hưởng quá nhiều.
Kích thước tối đa (1.125em) nhỏ hơn 2,5 lần kích thước tối thiểu (1em), đảm bảo rằng bạn luôn có thể sử dụng giá trị font-size hiệu quả là 200%.

Thang kiểu chữ có `pow()`

Hầu hết các thiết kế đều sử dụng nhiều cỡ chữ! Thang kiểu chữ mô tả mối quan hệ giữa nhiều cỡ chữ. Bạn có thể biểu thị kích thước này dưới dạng kích thước cơ sở và một loạt hệ số nhân để tính toán các kích thước khác. CSS cung cấp một thang đo kiểu chữ tích hợp liên quan đến từ khoá medium, đề cập đến lựa chọn ưu tiên về kích thước phông chữ của người dùng hoặc giá trị mặc định là 16px. Thang từ khoá đầy đủ là:

xx-small: 3/5 (0,6)
x-small: 3/4 (0,75)
small: 8/9 (0,89)
medium: 1 (kích thước cơ sở mà các kích thước khác được nhân lên)
large: 6/5 (1.2)
x-large: 3/2 (1,5)
xx-large: 2/1 (2)
xxx-large: 3/1 (3)

Thang tỷ lệ này tương ứng với giá trị mặc định của người dùng chứ không phải font-size gốc, vì vậy, thang tỷ lệ này sẽ không hoạt động hiệu quả sau khi bạn thay đổi font-size gốc của trang web. Hầu hết các tác giả đều tạo lại một thang kiểu chữ tương tự bằng các thuộc tính tuỳ chỉnh – đôi khi sử dụng cùng tên kích thước áo phông, đôi khi lại thích một loạt các bước tăng và giảm theo thang toán học. Có nhiều công cụ của bên thứ ba để tạo các thang âm này dựa trên các tỷ lệ phổ biến, chủ yếu là mượn từ thang âm nhạc phương Tây:

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

Nhưng bạn không cần các công cụ bên ngoài để tạo tỷ lệ của riêng mình trong CSS. Hàm pow() mới có thể tạo tỷ lệ cho bạn, với 1rem là kích thước cơ sở của riêng bạn!

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

Bạn không cần sử dụng các bước nguyên để duy trì tỷ lệ nhất quán. Trên thực tế, thang kiểu chữ 12pt phổ biến sử dụng khoảng 5 phân số cho mỗi bước. Mặc dù các kích thước lớn ở đây sử dụng các bước nguyên trong thang tỷ lệ, nhưng các kích thước nhỏ lại sử dụng các phân số để điều chỉnh tỷ lệ ở tốc độ chậm hơn.

Các hàm và mixin CSS giúp bạn có thể cô đọng logic đó hơn nữa, trong khi các công cụ tích hợp khác như progress() giúp bạn dễ dàng tạo các tỷ lệ điều chỉnh linh hoạt từ giá trị này sang giá trị khác. Tuy nhiên, những tính năng đó không nằm trong phạm vi của bản minh hoạ này.

Phản hồi kích thước của vùng chứa trong trang

Bạn có thể thực hiện tất cả các phép tính này trong các truy vấn vùng chứa bằng cách sử dụng đơn vị cqi thay cho vw hoặc vi, nhưng cũng nên giữ nguyên font-size của người dùng trên phần tử html, để mọi vùng chứa cài đặt kiểu chữ đều có thể tham chiếu lại lựa chọn ưu tiên đó của người dùng dưới dạng 1rem. Trong bản minh hoạ, bạn sẽ thấy rằng toàn bộ thang kiểu chữ được áp dụng cho body thay vì phần tử html gốc cho kiểu chữ chung, sau đó đặt lại dựa trên kích thước vùng chứa cho mọi phần tử có thuộc tính type-set.

Đây luôn là một sự đánh đổi với cỡ chữ tương đối của vùng chứa. Bạn sẽ đạt được kích thước phông chữ linh hoạt hơn cho từng phần tử trong ngữ cảnh, nhưng phải đánh đổi bằng tính nhất quán trên toàn trang. Bạn coi trọng yếu tố nào hơn sẽ tuỳ thuộc vào trường hợp sử dụng cụ thể của bạn. Và hãy nhớ rằng bản thân kiểu chữ linh hoạt là một sự đánh đổi, khiến các chế độ kiểm soát của người dùng như thu phóng kém hiệu quả hơn!

Mặc dù kiểu chữ thích ứng và thang kiểu chữ là những công cụ tuyệt vời dành cho nhà thiết kế, nhưng bạn không cần phải làm mọi thứ phức tạp hơn nếu không cần. Thang kiểu chữ mặc định của người dùng và thang kiểu chữ tích hợp cũng là một lựa chọn tuyệt vời! Nhưng nếu bạn chọn kiểu chữ thích ứng (hoặc linh hoạt), hãy nhớ kiểm thử xem kết quả hoạt động như thế nào liên quan đến các chế độ mặc định và chế độ cài đặt thu phóng khác nhau của người dùng. Chúc bạn học vui!

Kiểu chữ linh hoạt và thích ứng bằng các tính năng CSS cơ bản Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Đàm phán về một font-size cơ bản dựa trên lựa chọn ưu tiên của người dùng