试一试
font-variant-ligatures: normal;
font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: common-ligatures;
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
语法
css
/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: contextual; /* <contextual-alt-values> */
font-variant-ligatures: no-contextual; /* <contextual-alt-values> */
/* Two keyword values */
font-variant-ligatures: no-contextual common-ligatures;
/* Four keyword values */
font-variant-ligatures: common-ligatures no-discretionary-ligatures
historical-ligatures contextual;
/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;
font-variant-ligatures 属性被指定为 normal、none，或一个或多个下面列出的其他值类型。多个值之间用空格分隔。
值
normal-
此关键字激活正确渲染所需的常用连字和上下文形式。激活的连字和形式取决于字体、语言和脚本类型。这是默认值。
none-
此关键字指定禁用所有连字和上下文形式，即使是常见的形式。
<common-lig-values>-
这些值控制最常见的连字，例如
fi、ffi、th或类似情况。它们对应于 OpenType 值liga和clig。有两种可能的值：common-ligatures激活这些连字。请注意，关键字normal也会激活这些连字。no-common-ligatures停用这些连字。
<discretionary-lig-values>-
这些值控制特定于字体并由字体设计师定义的特定连字。它们对应于 OpenType 值
dlig。有两种可能的值：discretionary-ligatures激活这些连字。no-discretionary-ligatures停用这些连字。请注意，关键字normal通常会停用这些连字。
<historical-lig-values>-
这些值控制历史上在旧书中使用的连字，例如德语中的 tz 二合字母显示为 ꜩ。它们对应于 OpenType 值
hlig。有两种可能的值：historical-ligatures激活这些连字。no-historical-ligatures停用这些连字。请注意，关键字normal通常会停用这些连字。
<contextual-alt-values>-
这些值控制字母是否适应其上下文——也就是说，它们是否适应周围的字母。这些值对应于 OpenType 值
calt。有两种可能的值：contextual指定使用上下文替代项。请注意，关键字normal通常也会激活这些连字。no-contextual阻止它们的使用。
正式定义
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
font-variant-ligatures =
normal |
none |
[ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
<common-lig-values> =
common-ligatures |
no-common-ligatures
<discretionary-lig-values> =
discretionary-ligatures |
no-discretionary-ligatures
<historical-lig-values> =
historical-ligatures |
no-historical-ligatures
<contextual-alt-values> =
contextual |
no-contextual
示例
设置字体连字和上下文形式
HTML
html
<link href="//fonts.googleapis.ac.cn/css?family=Lora" rel="stylesheet" />
<p class="normal">
normal<br />
if fi ff tf ft jf fj
</p>
<p class="none">
none<br />
if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
common-ligatures<br />
if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
no-common-ligatures<br />
if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
discretionary-ligatures<br />
if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
no-discretionary-ligatures<br />
if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
historical-ligatures<br />
if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
no-historical-ligatures<br />
if fi ff tf ft jf fj
</p>
<p class="contextual">
contextual<br />
if fi ff tf ft jf fj
</p>
<p class="no-contextual">
no-contextual<br />
if fi ff tf ft jf fj
</p>
CSS
css
p {
font-family: "Lora", serif;
}
.normal {
font-variant-ligatures: normal;
}
.none {
font-variant-ligatures: none;
}
.common-ligatures {
font-variant-ligatures: common-ligatures;
}
.no-common-ligatures {
font-variant-ligatures: no-common-ligatures;
}
.discretionary-ligatures {
font-variant-ligatures: discretionary-ligatures;
}
.no-discretionary-ligatures {
font-variant-ligatures: no-discretionary-ligatures;
}
.historical-ligatures {
font-variant-ligatures: historical-ligatures;
}
.no-historical-ligatures {
font-variant-ligatures: no-historical-ligatures;
}
.contextual {
font-variant-ligatures: contextual;
}
.no-contextual {
font-variant-ligatures: no-contextual;
}
结果
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-variant-ligatures-prop |
浏览器兼容性
加载中…