CSS文字样式的相关属性

haketest lv.1

发布时间：2022-10-26 07:18:06 379

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>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

CSS文字样式的相关属性_css

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基础样式

CSS文字样式的相关属性_css_02

示例二：::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文字样式的相关属性_text_03

示例三：

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; 
}

代码运行效果：

CSS文字样式的相关属性_text_04

font-variant

normal
none
, , ,
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
, , , ordinal, slashed-zero
, , ruby

Taiwind CSS相关应用

https://tailwindcss.com/docs/font-variant-numeric#tabular-figures

文章来源： https://blog.51cto.com/u_15525868/5788863

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。