css中字体和文本的控制

标签：otto   case   shadow   indent   orm   center   wrap   var   mono   

字重font-weight

font-weight 的取值 ： normal | bold |bolder |lighter |100 ~ 900

其中400对应的自重是normal ，700对应的是bold

font-weight : normal; 

字号 font-size

百分数 - 百分数是子元素相对于父元素的大小，如父元素是20px，子元素设置为 200%即为你元素的两倍大小。

em - em单位等同于百分数单位。

px - 像素大小

p {
  font-size:20px;
}
p {
  font-size: 2em;
}
...
<p>一段文字</p>

字体风格 font-style

取值：

• normal - 文本正常显示
• italic - 使用文本的斜体
• oblique - 让文本倾斜

intalic 和 oblique的区别：可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜。italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。

颜色 color

可以使用如 red | green 等字符颜色声明

color:red;

使用十六进制网页颜色

color:#ddffde

如果颜色字符相同如 #dddddd 可以简写为 #ddd

使用RGB颜色

color:rgb(38, 149, 162);

透明颜色

透明色从 0~1 间，表示透明到不透明

color:rgba(38, 149, 162,.2);

行高 line-height

div {
	line-height: 2em;
}

大小转换

小号大写字母

span {
	font-variant: small-caps;
}
...

<span>hellow world ！</span>

字母大小写转换

<style>
h2 {
  /* 首字母大写 */
  text-transform: capitalize;

  /* 全部大写 */
  text-transform: uppercase;

  /* 全部小写 */
  text-transform: lowercase;
  }
</style>

组合定义 font

可以使用 font 一次将字符样式定义，可以按顺序设置如下属性：

• font-style
• font-variant（字母大小转换）
• font-weight
• font-size/line-height（必须）
• font-family（必须）

span {
	font: bold italic 20px/1.5 ‘Courier New‘, Courier, monospace;
}
...

<span>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</span>

上例中的 20px 为字体大小，1.5为1.5倍行高定义

文本装饰 text-decoration

文本阴影 text-shadow

参数顺序为：水平偏移，垂直偏移，模糊度、颜色

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

空白处理 white-space

使用 white-space 控制文本空白显示。

h2 {
	white-space: pre;
	width: 100px;
	border: solid 1px #ddd;
}
...

<h2>一段文字一段文字</h2>

文本溢出控制 overflow-wrap

overflow-wrap是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

文本缩进 text-indent

将段落的第一行缩进 50 像素：

p
  {
  text-indent:50px;
  }

水平对齐 text-align

值：使用 left|right|center 对文本进行对齐操作

垂直对齐 vertical-align

字词间距 world-spacing 和 letter-spacing

单词与字符间距

使用 word-spacing 与 letter-spacing 控制单词与字母间距。

h2 {
	word-spacing: 2em;
	letter-spacing: 3em;
}

书写模式 writing-mode

css中字体和文本的控制

标签：otto   case   shadow   indent   orm   center   wrap   var   mono   

原文地址：https://www.cnblogs.com/zhc2020Blog/p/12628472.html