css文本与字体常见用法集合

总结一下项目中常见的文本和字体的样式设置

文本

text-align-last: 段落的最后一行的对齐方式

// 末尾右对齐
p{ text-align-last: right;}

text-decoration 文本修饰,下划线、上划线、删除线等。

// 中间删除线
p{ text-decoration:line-through;}

text-indent 首行文本的缩进

// 首行缩进20px
p{ text-index:20px;}

text-overflow 文本溢出

// 溢出的文本设置为点
p {
white-space:nowrap; 
overflow:hidden;
text-overflow:ellipsis
}

text-transform 控制文本中的字母

// 文本中的每个单词以大写字母开头
p {
text-transform: capitalize;
}

white-space 指定元素内的空白怎样处理

// 文本不会换行
p {
white-space:nowrap;
}

word-break 在合适的点换行

p {
word-break:hyphenate;
}

word-spacing 增加或减少单词间的间隔

// 规定段落中的字间距是 25 像素
p {
word-spacing:25px;
}

letter-spacing 单个字符间距

// 规定字符的字间距是 2 像素
p {
letter-spacing:2px
}
字体

设置字体:font-family
font-family属性可以设置几个字体名称作为一种"后备"机制,
如果浏览器不支持第一种字体,他将尝试下一种字体。

p {font-family:"Times New Roman", Times, serif;} 

字体样式:font-style
font-style定义字体的样式主要属性有三个值
正常 font-style:normal
斜体 font-style:italic
倾斜 font-style:oblique

设置字体大小
常用的设置字体大小有四个单位 px 百分比 em rem(vh、vw,这些笔者也不会,不知道能不能设置字体大小…)
px不必多说,
百分比相对父元素的font-size。
em相对自身font-size的大小,如果自身没有设置font-size的话则向上找寻直到body,这点百分比也一样。
rem相对于根元素;

简写
顺序:font-style | font-variant | font-weight | font-size | line-height | font-family
例如:.font{font:italic small-caps bold 12px/1.5em arial,verdana;}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章