CSS font-feature-settings 属性 详解
css3基础 2022-07-14 16:27:49小码哥的IT人生shichen
CSS font-feature-settings 属性
定义和用法
font-feature-settings 属性允许控制 OpenType 字体中的高级印刷特性。
实例
规定 font-feature-settings：
/* 启用 small-caps */
.ex1 { font-feature-settings: "smcp" on; }
/* 将大写和小写都转换为小型大写字母 */
.ex2 { font-feature-settings: "c2sc", "smcp"; }
/* 没有常见的连字 */
.ex3 { font-feature-settings: "liga" 0; }
/* 启用自动分数 */
.ex4 { font-feature-settings: "frac"; }
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
/* 启用 small-caps */
.ex1 { font-feature-settings: "smcp" on; }
/* 将大写和小写都转换为小型大写 */
.ex2 { font-feature-settings: "c2sc", "smcp"; }
/* 没有常见的连字 */
.ex3 { font-feature-settings: "liga" 0; }
/* 分数 */
.ex4 { font-feature-settings: "frac"; }
</style>
</head>
<body>
<h1>font-feature-settings 属性</h1>
<div class="ex1">This is some text 0123.</div>
<div class="ex2">This is some text 0123.</div>
<div class="ex3">This is some text 0123.</div>
<div class="ex4">This is some text 0123.</div>
<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 font-feature-settings 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
font-feature-settings: normal|feature-value;
属性值
| 值 | 描述 |
|---|---|
| normal | 默认。使用默认设置来布置文本。 |
| feature-value | 格式：string [1|0|on|off]，字符串始终为 4 个 ASCII 字符。 |
技术细节
| 默认值： | normal |
|---|---|
| 继承： | 是 |
| 动画制作： | 不支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.fontFeatureSettings="normal" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 48.0 16.0 -webkit- |
10.0 | 34.0 15.0 -moz- |
9.1 | 35.0 15.0 -webkit- |
