css之字体属性

135 阅读2分钟

css之字体属性

  1. 字体样式 之 font-family

font-family字体的楷体样式

基本语法

body{
    font-family:"""" //如果第一个字体没有就会使用后面的备选字体 可多个备选,按轮次应用
}

字体资源只能是使用者电脑上的字体属性,如果使用者电脑上没有当前字体就会使用电脑默认字体!!!

  1. 字体样式 之 font-size

基本语法

body{
    font-size:12px   //通常使用像素为单位 px,em,rem
}
  1. 字体样式 之 字体颜色

基本语法

body{
    color:rgb(255,255,255); //red green blue rgb表示法 每个取值范围为0-255 白色!
}
body{
    color:rgba(255,0,0,.5); //a:alpha 透明度 0-1之间
}
body{
    color:#FF6700;  //十六进制表示法
}
body{
    color:green;  //直接打颜色名字
}
  1. 字体样式 之 font-style

字体的倾斜

基本语法

body{
    font-style:normal; //默认值 italic 斜体 em标签
}
  1. 字体样式 之 font-weight

字体的粗细

基本语法

body{
    font-weight:normal; //默认值=400  一般取值在100-900 strong标签
}
  1. 文本属性 之 text-decoration

文本线的设置

基本语法

body{
    text-decoration:none; //默认  1.underline 下划线 2.overline 上划线 3.line-through 删除线
}
  1. 文本属性 之 text-indent

text-indent 文本缩进!!

基本语法

body{
    text-indent:32px;  //px为单位时缩进距离根据文本大小来设置 而2em em为单位时自动设置成对应文本大小的两格缩进
}
  1. 文本属性 之 行高

行高! 行与行之间的距离

基本语法

body{
    line-height:32px; //文本在一行中上下居中显示 当行高小于文本大小时 就会出现文本覆盖
}
body{
    letter-spacing:5px; //文字之间的距离 !!只对中文有用!! 而英文单词之间我们用 word-spacing
}
  1. 文本属性 之 text-align

基本语法

body{
    text-align:center; //水平居中 右对齐right  左对齐left
    
}