一、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”。
-
数字:表示字体大小的倍数。
-
百分比:表示字体大小的百分比。
-
行高相关注意点:
-
**注意:**以上属性可以合并成一个font属性,如font: 16px/1.5 Arial, sans-serif;,其中斜杠前面的是字号,斜杠后面的是行高。
二、其他常见属性
-
color:xxx; 设置字体颜色
-
text-align : center; 设置文本水平方向居中,也可设left、right、justify(两端对齐)
-
Vertical-align 适用于行内、行内块元素
解决图片底部存在间隙:
-
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(换行,英文不会自动换行)
解决文本溢出问题方案: