1. Web
  2. CSS
  3. font-variant-east-asian

font-variant-east-asian

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

font-variant-east-asian CSS 屬性控制東亞文字（如日文和中文）的替代字形的使用。

試一試

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;
}

語法

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;

/* Global values */
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;

值

normal

此關鍵字將停用此類替代字形的使用。

ruby

此關鍵字強制使用特定字形用於注音字元。由於注音字元通常較小，字型建立者通常會設計特定的形式，通常稍微粗一些以提高對比度。此關鍵字對應於 OpenType 值 ruby。

<east-asian-variant-values>

這些值指定應用於顯示的表意字形變體集。可能的值有：

關鍵字 定義字形標準 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 無，使用簡體中文字形 smpl
traditional 無，使用繁體中文字形 trad
<east-asian-width-values>

這些值控制用於東亞字元的字形的尺寸。可能有兩個值：

  • proportional-width 啟用寬度可變的東亞字元集。它對應於 OpenType 值 pwid。
  • full-width 啟用寬度都相同，大致為方形的東亞字元集。它對應於 OpenType 值 fwid。

正式定義

初始值normal
應用於所有元素和文字。它也適用於 ::first-letter 和 ::first-line。
繼承性是
計算值同指定值
動畫型別離散

正式語法

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

示例

設定東亞字形變體

此示例要求您的作業系統中安裝“Yu Gothic”字型，其他字型可能不支援 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;
}

結果

規範

規範
CSS 字型模組第 4 級
# font-variant-east-asian-prop

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於，由MDN 貢獻者修訂。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.