Text-transform
常用属性
text-transform: capitalize | 每个单词的首字母转换为大写字母 |
text-transform: uppercase | 全部转换为大写 |
text-transform: lowercase | 全部转换为小写 |
text-transform: none | 是一个关键字，用于阻止更改所有字符的大小写。 |
text-transform: full-width | 用于强制在正方形内书写字符 |
text-transform: full-size-kana | 关键字通常用于<ruby>注释文本，它将所有小假名字符转换为等效的全尺寸假名，以补偿Ruby中通常使用的小字体大小的易读性问题。 |
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
font-feature-settings
/* use small-cap alternate glyphs */
.smallcaps {
font-feature-settings: "smcp" on;
}
/* convert both upper and lowercase to small caps (affects punctuation also) 不管大写还是小写，全部转换为小写*/
.allsmallcaps {
font-feature-settings: "c2sc", "smcp";
}
/* use zeros with a slash through them to differentiate from "O"
通过在数字0中间加分割线来区分数字0和字母o*/
.nicezero {
font-feature-settings: "zero";
}
/* enable historical forms
启用历史样式，即字母为相连 */
.hist {
font-feature-settings: "hist";
}
/* disable common ligatures, usually on by default
禁用常用的连字样式，使用默认样式 */
.noligs {
font-feature-settings: "liga" 0;
}
/* enable tabular (monospaced) figures
启用表格等宽数字 */
td.tabular {
font-feature-settings: "tnum";
}
/* enable automatic fractions 启用自动分数 */
.fractions {
font-feature-settings: "frac";
}
/* use the second available swash character
使用第二个可用的花体字符 */
.swash {
font-feature-settings: "swsh" 2;
}
/* enable stylistic set 7 启用样式集7 */
.fancystyle {
font-family: Gabriola;
font-feature-settings: "ss07";
}s
::first-letter 首字母样式 & ::first-line首行样式
示例一：::first-letter基础样式
示例二：::first-line基础样式
p::first-line {
font-size: 1.5rem;
font-weight: bold;
background-image: linear-gradient(to right, blue, pink);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}代码运行效果：
示例三：
CSS样式：
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}代码运行效果：
font-variant
normal |
none |
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values> |
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() |
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps |
<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero |
<east-asian-variant-values>, <east-asian-width-values>, ruby |
Taiwind CSS相关应用
https://tailwindcss.com/docs/font-variant-numeric#tabular-figures
标签：settings,样式,text,feature,transform,font,CSS,属性 From： https://blog.51cto.com/u_15525868/5788863