字重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
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。下划线 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。删除线 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
文本阴影 text-shadow
参数顺序为：水平偏移，垂直偏移，模糊度、颜色
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
空白处理 white-space
使用 white-space 控制文本空白显示。
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
h2 {
white-space: pre;
width: 100px;
border: solid 1px #ddd;
}
...
<h2>一段文字一段文字</h2>
文本溢出控制 overflow-wrap
overflow-wrap是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
| 值 | 描述 |
|---|---|
| normal | 表示在正常的单词结束处换行。 |
| break-word | 表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。 |
文本缩进 text-indent
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
将段落的第一行缩进 50 像素：
p
{
text-indent:50px;
}
水平对齐 text-align
值：使用 left|right|center 对文本进行对齐操作
垂直对齐 vertical-align
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
字词间距 world-spacing 和 letter-spacing
单词与字符间距
使用 word-spacing 与 letter-spacing 控制单词与字母间距。
h2 {
word-spacing: 2em;
letter-spacing: 3em;
}
书写模式 writing-mode
| 模式 | 说明 |
|---|---|
| horizontal-tb | 水平方向自上而下的书写方式 |
| vertical-rl | 垂直方向自右而左的书写方式 |
| vertical-lr | 垂直方向内内容从上到下，水平方向从左到右 |