Tidadigi Logo

CSS font-stretch Property

Thuộc tính font-stretch trong CSS được dùng để làm chữ rộng hơn hoặc hẹp hơn. Thuộc tính này không hoạt động với mọi font chữ. Nó chỉ hoạt động khi font family có một width-variant face.

Cú pháp:

font-stretch: normal|ultra-condensed|extra-condensed|condensed|
semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;

Giá trị mặc định: normal

Giá trị thuộc tính:

  • normal: Đây là font face mặc định. Nó không kéo giãn font chữ.
  • ultra-condensed: Dùng để chỉ định font face nén hơn bình thường.
  • extra-condensed: Dùng để đặt chữ hẹp hơn bình thường, không hẹp hơn ultra-condensed.
  • condensed: Dùng để đặt chữ hẹp hơn semi-condensed, không hẹp hơn extra-condensed.
  • semi-condensed: Dùng để đặt chữ hẹp hơn bình thường, không hẹp hơn semi-condensed.
  • semi-expanded: Dùng để đặt chữ rộng hơn bình thường, nhưng không rộng hơn expanded.
  • expanded: Dùng để đặt chữ rộng hơn semi-expanded, nhưng không rộng hơn extra-expanded.
  • extra-expanded: Dùng để đặt chữ rộng hơn expanded, nhưng không rộng hơn ultra-expanded.
  • ultra-expanded: Dùng để đặt chữ rộng hơn ultra-expanded.

Ví dụ:

html 
<!--HTML code to illustrate font-stretch 
Property -->
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-stretch Property
    </title>

    <style>
        .normal {
            font-stretch: normal;
        }

        .ultra_condensed {
            font-stretch: ultra-condensed;
        }

        .extra_condensed {
            font-stretch: extra-condensed;
        }

        .condensed {
            font-stretch: condensed;
        }

        .extra_condensed {
            font-stretch: extra-condensed;
        }

        .semi_expanded {
            font-stretch: semi-expanded;
        }

        .expanded {
            font-stretch: expanded;
        }

        .extra_expanded {
            font-stretch: extra-expanded;
        }

        .ultra_expanded {
            font-stretch: ultra-expanded;
        }
    </style>
</head>

<body>
    <div class="normal">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="ultra_condensed">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="extra_condensed">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="condensed">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="extra_condensed">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="semi_expanded">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="expanded">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="extra_expanded">
        GeeksforGeeks: A computer science portal
    </div>

    <div class="ultra_expanded">
        GeeksforGeeks: A computer science portal
    </div>
</body>
</html>

Đầu ra:

css-font-stretch-property

Lưu ý: Thuộc tính này sẽ không hoạt động trên bất kỳ font nào.

Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi font-stretch property được liệt kê dưới đây:

  • Google Chrome 60.0 trở lên
  • Edge 12.0 trở lên
  • Internet Explorer 9.0 trở lên
  • Firefox 9.0 trở lên
  • Opera 47.0 trở lên
  • Safari 11.0 trở lên

Last Updated : 21/07/2025