一、CSS字体属性
-
font-family(字体族):指定字体的名称或类别。可以指定多个字体族,用逗号分隔,浏览器会按照指定的顺序依次寻找可用字体。可取值:
- 字体名称:如"Arial"、"Times New Roman"等。
- 通用字体系列:如"serif"、"sans-serif"、"monospace"等。
- 自定义字体系列:如"myFont, Arial, sans-serif"。
-
font-size(字号):指定字体的大小。可取值:
- 绝对单位:如"px"、"pt"、"mm"、"cm"、"in"。
- 相对单位:如"em"、"rem"、"ex"、"ch"、"vw"、"vh"、"vmin"、"vmax"。
- 百分比:如"100%"、"200%"等。
-
font-weight(字重):指定字体的粗细。可取值:
- 数字:如"100"、"400"、"700"等,表示相应的字重值。
- 关键字:如"normal"、"bold"、"bolder"、"lighter"等。
-
font-style(字体样式):指定字体的风格。可取值:
- 关键字:如"normal"、"italic"、"oblique"。
- 继承值。
-
font-variant(字体变形):指定字体的大小写形式。可取值:
- 关键字:如"normal"、"small-caps"。
- 继承值。
-
font-stretch(字体拉伸):指定字体的紧缩或扩张程度。可取值:
- 关键字:如"normal"、"condensed"、"expanded"、"ultra-condensed"、"extra-condensed"、"semi-condensed"、"semi-expanded"、"extra-expanded"、"ultra-expanded"。
- 数字:如"50%"、"200%"等。
-
line-height(行高):指定文本行的高度。可取值:
-
绝对单位:如"px"、"pt"、"mm"、"cm"、"in"。
-
相对单位:如"em(相对父元素的大小)"、"rem(相对根元素的大小)"、"ex(小写字母高度)"、"ch"、"vw"、"vh"、"vmin"、"vmax"。
-
数字:表示字体大小的倍数。
-
百分比:表示字体大小的百分比。
-
行高相关注意点:
1、行内元素高度由行高撑开(默认1.32倍),而不是字体的高度。就算字体不设置高度也会被行高撑开。
2、height :line_hieight;行内元素上下垂直居中
3、行高可以继承。一般可以给body设置
body { line-light:1.5; }
4、line-height 等于 font-size + 上下所占行间距
-
**注意:**以上属性可以合并成一个font属性,如font: 16px/1.5 Arial, sans-serif;,其中斜杠前面的是字号,斜杠后面的是行高。
二、其他常见属性
-
color:xxx; 设置字体颜色
-
text-align : center; 设置文本水平方向居中,也可设left、right、justify(两端对齐)
-
Vertical-align 适用于行内、行内块元素
baseline ; 元素基线与父元素基线对齐
middle ; 元素中心线与父元素中心线对齐
top,bottom亦然
可以接收像素值,正上负下
解决图片底部存在间隙:
图片是行内元素,默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对其方式导致图片并不是与div的真实底部对齐,而是与文基线对齐。
解决方法:
- 给img(图片)设置display: block;
- 给img(图片)设置vertical-align: bottom;
- 修改line-height值为0或很小
- 父元素的font-size=0
-
text-index:设置文本缩进
-
text-decoration:none/underline(下划线)/line-throngh(贯穿线)/overline(上划线) 文本装饰
-
text-transform: uppercase(转小写)/none/lowercase(转小写)/capitalize(首字母大写)
-
word-spacing: xx px; 英文单词间距
-
letter-spacing:字母之间间距
-
white-spacing :nowrap(不换行,中文会自动换行)/normal,设置中文是否换行
-
word-break: 强制换行 ,可取值keep-all(不换行)、break-all(换行,英文不会自动换行)
解决文本溢出问题方案:
单行文本溢出显示省略号
css.overflow{ width:200px overflow:hidden white-spacing:nowarp; text-overflow:ellipsis; -o-text-overflow:ellipsis; }
多行文本溢出显示省略号
.overflow{ width:200px height:66px; overflow:hidden text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
其他方法:定位或者专门的插件
利用伪类
.t:after{ display: inline; content: "..."; font-size: 16px; }