1. Web
  2. CSS
  3. Reference
  4. Properties
  5. font-variant-east-asian

font-variant-east-asian

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 CSS font-variant-east-asian kiểm soát việc sử dụng các glyph thay thế cho chữ viết Đông Á, như tiếng Nhật và tiếng Trung.

Try it

font-variant-east-asian: normal;

font-variant-east-asian: ruby;

font-variant-east-asian: jis78;

font-variant-east-asian: proportional-width;

<section id="default-example">
  <div id="example-element">
    <p>
      JIS78とJIS83以降では、檜と桧、籠と篭など、一部の文字の入れ替えが行われている。また、「唖然」や「躯体」などの書体が変更されている。
    </p>
  </div>
</section>

section {
  font-family:
    "YuGothic Medium", "YuGothic", "Yu Gothic Medium", "Yu Gothic", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

Cú pháp

css
font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78; /* <east-asian-variant-values> */
font-variant-east-asian: jis83; /* <east-asian-variant-values> */
font-variant-east-asian: jis90; /* <east-asian-variant-values> */
font-variant-east-asian: jis04; /* <east-asian-variant-values> */
font-variant-east-asian: simplified; /* <east-asian-variant-values> */
font-variant-east-asian: traditional; /* <east-asian-variant-values> */
font-variant-east-asian: full-width; /* <east-asian-width-values> */
font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
font-variant-east-asian: ruby full-width jis83;

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

Giá trị

normal

Từ khóa này dẫn đến việc hủy kích hoạt việc sử dụng các glyph thay thế đó.

ruby

Từ khóa này buộc sử dụng các glyph đặc biệt cho các ký tự ruby. Vì những ký tự này thường nhỏ hơn, các nhà tạo phông chữ thường thiết kế các dạng cụ thể, thường đậm hơn một chút để cải thiện độ tương phản. Từ khóa này tương ứng với các giá trị OpenType ruby.

<east-asian-variant-values>

Các giá trị này chỉ định một tập hợp các biến thể glyph biểu tượng học được dùng để hiển thị. Các giá trị có thể là:

Từ khóa Tiêu chuẩn định nghĩa glyph Tương đương OpenType
jis78 JIS X 0208:1978 jp78
jis83 JIS X 0208:1983 jp83
jis90 JIS X 0208:1990 jp90
jis04 JIS X 0213:2004 jp04
simplified Không có, sử dụng các glyph tiếng Trung giản thể smpl
traditional Không có, sử dụng các glyph tiếng Trung phồn thể trad
<east-asian-width-values>

Các giá trị này kiểm soát kích thước của các ký tự dùng cho ký tự Đông Á. Có hai giá trị có thể:

  • proportional-width kích hoạt tập hợp các ký tự Đông Á có chiều rộng thay đổi. Nó tương ứng với các giá trị OpenType pwid.
  • full-width kích hoạt tập hợp các ký tự Đông Á đều có cùng kích thước gần như vuông. Nó tương ứng với các giá trị OpenType fwid.

Định nghĩa hình thức

Initial valuenormal
Applies toall elements and text. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Cú pháp hình thức

font-variant-east-asian = 
  normal                                              |
  [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]  

<east-asian-variant-values> = 
  jis78        |
  jis83        |
  jis90        |
  jis04        |
  simplified   |
  traditional  

<east-asian-width-values> = 
  full-width          |
  proportional-width

Ví dụ

Đặt các biến thể glyph Đông Á

Ví dụ này yêu cầu phông chữ "Yu Gothic" được cài đặt trong hệ điều hành của bạn, các phông chữ khác có thể không hỗ trợ các tính năng OpenType.

HTML

html
<table>
  <thead></thead>
  <tbody>
    <tr>
      <th>normal/jis78:</th>
      <td>麹町</td>
      <td class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional:</th>
      <td>大学</td>
      <td class="traditional">大学</td>
    </tr>
  </tbody>
</table>

CSS

css
tbody {
  border: 0;
}

td {
  font-family: "Yu Gothic", fantasy;
  font-size: 20px;
}
th {
  color: grey;
  padding-right: 10px;
}

.ruby {
  font-variant-east-asian: ruby;
}

.jis78 {
  font-variant-east-asian: jis78;
}

.traditional {
  font-variant-east-asian: traditional;
}

Kết quả

Thông số kỹ thuật

Specification
CSS Fonts Module Level 4
# font-variant-east-asian-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 by MDN contributors.

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