在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

font-variant-east-asian CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.

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: unset;
					

句法

值

normal

This keyword leads to the deactivation of the use of such alternate glyphs.

ruby

This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values ruby .

<east-asian-variant-values>

These values specify a set of logographic glyph variants which should be used for display. Possible values are:

Keyword	Standard defining the glyphs	OpenType equivalent
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	None, use the simplified Chinese glyphs	smpl
traditional	None, use the traditional Chinese glyphs	trad

<east-asian-width-values>

These values control the sizing of figures used for East Asian characters. Two values are possible:

• proportional-width activating the set of East Asian characters which vary in width. It corresponds to the OpenType values pwid .
• full-width activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values fwid .

形式定义

初始值	normal
适用于	所有元素。它还适用于 ::first-letter and ::first-line .
继承	yes
计算值	如指定
动画类型	discrete

形式句法

normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
where 
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]
							

范例

Setting East Asian glyph variants

This example require font "Yu Gothic" installed in your OS, other fonts may not support OpenType features.

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

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 Fonts Module Level 3 The definition of 'font-variant-east-asian' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
font-variant-east-asian	Chrome 完整支持 63	Edge 完整支持 79	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 50	Safari 不支持 No	WebView Android 完整支持 63	Chrome Android 完整支持 63	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 46	Safari iOS 不支持 No	Samsung Internet Android 完整支持 8.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

• 最后修改： Aug 14, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 字体
4. 指南

   1. OpenType font features guide
   2. Variable fonts guide
5. At-Rules

   1. @font-face
   2. @font-feature-values
6. 特性

   1. font
   2. font-family
   3. font-feature-settings
   4. font-kerning
   5. font-language-override
   6. font-optical-sizing
   7. font-size
   8. font-size-adjust
   9. font-smooth
   10. font-stretch
   11. font-style
   12. font-synthesis
   13. font-variant
   14. font-variant-alternates
   15. font-variant-caps
   16. font-variant-east-asian
   17. font-variant-ligatures
   18. font-variant-numeric
   19. font-variant-position
   20. font-variation-settings
   21. font-weight
   22. line-height
   23. line-height-step