font-variant-east-asian

font-variant-east-asian CSS 属性控制东亚文字（如日语和中文）中备用字形的用法。

尝试一下

语法

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

此关键字强制使用特殊字形表示 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

示例

设置东亚字形变体

此示例需要在您的操作系统中安装“游ゴシック”字体，其他字体可能不支持 OpenType 特性。

HTML

html
<table>
  <thead></thead>
  <tbody style="border:0;">
    <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
td {
  font-family: "Yu Gothic";
  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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅