试一试
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 等效值 jis78JIS X 0208:1978 jp78jis83JIS X 0208:1983 jp83jis90JIS X 0208:1990 jp90jis04JIS X 0213:2004 jp04simplified无，使用简体中文字形 smpltraditional无，使用繁体中文字形 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 |
浏览器兼容性
加载中…