font-variant-numeric

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Thuộc tính font-variant-numeric CSS kiểm soát việc sử dụng các ký tự thay thế cho số, phân số và ký hiệu thứ tự.

Try it

font-variant-numeric: normal;

font-variant-numeric: ordinal;

font-variant-numeric: slashed-zero;

font-variant-numeric: tabular-nums;

font-variant-numeric: oldstyle-nums;

font-variant-numeric: lining-nums;

font-variant-numeric: proportional-nums;

font-variant-numeric: diagonal-fractions;

<section id="default-example">
  <div id="example-element">
    <table>
      <tbody>
        <tr>
          <td><span class="tabular">0</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3.54</span></td>
        </tr>
        <tr>
          <td><span class="tabular">1.71</span></td>
        </tr>
        <tr>
          <td><span class="tabular">1st</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3/4</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

@font-face {
  font-family: "Source Sans Pro";
  src:
    local("SourceSansPro-Regular"),
    url("/shared-assets/fonts/SourceSansPro-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Source Sans Pro", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

#example-element table {
  margin-left: auto;
  margin-right: auto;
}

.tabular {
  border: 1px solid;
}

Cú pháp

css

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Giá trị toàn cục */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

Thuộc tính này có thể nhận một trong hai dạng:

từ khóa normal
hoặc một hay nhiều giá trị khác trong danh sách bên dưới, cách nhau bởi khoảng trắng, theo bất kỳ thứ tự nào.

Giá trị

normal

Từ khóa này tắt việc sử dụng các ký tự thay thế.

ordinal

Từ khóa này buộc sử dụng các ký tự đặc biệt cho ký hiệu thứ tự, ví dụ như 1st, 2nd, 3rd, 4th trong tiếng Anh hoặc 1a trong tiếng Ý. Tương ứng với giá trị OpenType ordn.

slashed-zero

Từ khóa này buộc sử dụng số 0 có gạch chéo; hữu ích khi cần phân biệt rõ ràng giữa chữ O và số 0. Tương ứng với giá trị OpenType zero.

<numeric-figure-values>

Các giá trị này kiểm soát kiểu ký tự số được dùng. Có hai giá trị khả dụng:

lining-nums kích hoạt bộ ký tự số nằm trên đường cơ sở. Tương ứng với giá trị OpenType lnum.
oldstyle-nums kích hoạt bộ ký tự số kiểu cũ, trong đó một số chữ số như 3, 4, 7, 9 có phần kéo xuống. Tương ứng với giá trị OpenType onum.

<numeric-spacing-values>

Các giá trị này kiểm soát kích thước của ký tự số. Có hai giá trị khả dụng:

proportional-nums kích hoạt bộ ký tự số có chiều rộng không đều nhau. Tương ứng với giá trị OpenType pnum.
tabular-nums kích hoạt bộ ký tự số có chiều rộng bằng nhau, giúp căn chỉnh dễ dàng như trong bảng. Tương ứng với giá trị OpenType tnum.

<numeric-fraction-values>

Các giá trị này kiểm soát ký tự dùng để hiển thị phân số. Có hai giá trị khả dụng:

diagonal-fractions kích hoạt bộ ký tự phân số trong đó tử số và mẫu số thu nhỏ lại và được ngăn cách bởi dấu gạch chéo. Tương ứng với giá trị OpenType frac.
stacked-fractions kích hoạt bộ ký tự phân số trong đó tử số và mẫu số thu nhỏ, xếp chồng và ngăn cách bởi một đường ngang. Tương ứng với giá trị OpenType afrc.

Định nghĩa chính thức

Initial value	`normal`
Applies to	all elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

Cú pháp chính thức

font-variant-numeric = 
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]  

<numeric-figure-values> = 
  lining-nums    |
  oldstyle-nums  

<numeric-spacing-values> = 
  proportional-nums  |
  tabular-nums       

<numeric-fraction-values> = 
  diagonal-fractions  |
  stacked-fractions

Ví dụ

Thiết lập dạng số thứ tự

Nhấn "Play" trong các khối mã bên dưới để chỉnh sửa ví dụ trong MDN Playground:

html

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

css

@font-face {
  font-family: "Source Sans Pro";
  src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

.ordinal {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2rem;
  font-variant-numeric: ordinal;
}

Đặc tả

Specification
CSS Fonts Module Level 4 # font-variant-numeric-prop

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content