CSS font-stretch property là gì ?

CSS font-stretch property cho phép chúng ta chọn một kiểu in chuẩn, mở rộng hoặc thu hẹp từ gia đình phông chữ. Thuộc tính này thiết lập văn bản rộng hơn hoặc hẹp hơn so với chiều rộng mặc định của phông chữ. Nó sẽ không hoạt động trên bất kỳ phông chữ nào nhưng chỉ hoạt động trên phông chữ có mặt thêm các kiểu in khác nhau như kiểu in mở rộng và thu hẹp.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới.

CSS font-stretch property là gì?

CSS font-stretch property cung cấp 9 giá trị từ khóa để chọn chiều rộng của kiểu in.

1. “normal” – Đây là giá trị mặc định, không thu hẹp hoặc mở rộng bất kỳ kiểu in nào.
2. “semi-condensed” – Giá trị này hơi thu hẹp các ký tự văn bản của phần tử. Giá trị này làm cho văn bản hẹp hơn so với kiểu in chuẩn, nhưng không hẹp hơn so với kiểu in thu hẹp.
3. “condensed” – Giá trị này làm cho văn bản hẹp hơn so với giá trị “semi-condensed” nhưng không hẹp hơn so với giá trị “extra-condensed”.
4. “extra-condensed” – Giá trị này làm cho văn bản hẹp hơn so với giá trị “condensed” nhưng không hẹp hơn so với giá trị “ultra-condensed”.
5. “ultra-condensed” – Giá trị này làm cho văn bản cực kỳ thu hẹp.
6. “semi-expanded” – Giá trị này hơi mở rộng các ký tự văn bản của phần tử. Giá trị này làm cho văn bản rộng hơn so với kiểu in chuẩn, nhưng không rộng hơn so với kiểu in mở rộng.
7. “expanded” – Giá trị này làm cho văn bản rộng hơn so với giá trị “semi-expanded” nhưng không rộng hơn so với giá trị “extra-expanded”.
8. “extra-expanded” – Giá trị này làm cho văn bản rộng hơn so với giá trị “expanded” nhưng không rộng hơn so với giá trị “ultra-expanded”.
9. “ultra-expanded” – Giá trị này làm cho văn bản cực kỳ rộng.

CSS font-stretch property phù hợp cho các nhà phát triển web, thiết kế trang web và những người muốn tinh chỉnh kiểu in của văn bản trên trang web của mình.

Hướng dẫn CSS font-stretch property là gì?

Để sử dụng CSS font-stretch property, ta cần thêm thuộc tính “font-stretch” vào phần tử CSS của mình và đặt giá trị nó theo ý muốn. Ví dụ:

p {
  font-family: Arial, sans-serif;
  font-stretch: expanded;
}

Trong ví dụ này, kiểu in được chọn là “expanded”, văn bản sẽ được hiển thị rộng hơn so với kiểu in chuẩn.

Ưu và Nhược điểm CSS font-stretch property

Ưu điểm:

• ChoCSS font-stretch property cho phép tinh chỉnh kiểu in của văn bản trên trang web theo ý muốn, giúp tăng tính linh hoạt và sáng tạo trong thiết kế trang web.

Nhược điểm:

• Thuộc tính này chỉ hoạt động với các phông chữ có mặt thêm các kiểu in khác nhau như kiểu in mở rộng và thu hẹp.
• Tùy thuộc vào từng trường hợp sử dụng, việc sử dụng CSS font-stretch property có thể làm mất tính đồng nhất trong thiết kế trang web.

Lời khuyên CSS font-stretch property

Khi sử dụng CSS font-stretch property, cần lưu ý rằng nó chỉ áp dụng được cho các phông chữ có mặt thêm các kiểu in khác nhau như kiểu in mở rộng và thu hẹp. Nếu không chắc chắn về kiểu in của phông chữ, ta nên sử dụng giá trị “normal” để tránh ảnh hưởng đến tính đồng nhất của thiết kế trang web.