文本与字体属性

发表于 更新于 分类于

常用文本样式属性

  1. color
    • 设置文本内容的前景色
      • RGBA ，最后一个表示透明度，0表示纯透明，1表示纯实心
    • 16进制，RGB，RGBA
    • 如果颜色值是#aabbcc的形式，可以简写为#abc
      • #ff0000 -> #f00
  2. font-size
    • 设置字号，单位通常px
  3. font-weight
    • normal 正常粗细，与400等值
    • bold 加粗，与700等值
    • lighter 更细，大多数中文字体不支持
    • bolder 更粗，大多数中文字体不支持
  4. font-style
    • normal 取消倾斜，比如把天生倾斜的i、em等标签设置为不倾斜
    • italic 设置为倾斜字体（常用）
    • oblique 设置为倾斜字体（用常规字体模拟，不常用）
  5. text-decoration
    • none 没有修饰线
    • underline 下划线
    • line-through 删除线

继承性

  1. color
  2. font-开头的
  3. list-开头的
  4. text-开头的
  5. line-开头的
  6. 因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了
  7. 在继承的情况下，选择器权重计算失效，而是“就近原则”，继承的不如元素选中的权重大

字体属性详解

  1. font-family
    • 字体可以是列表形式，一般英语字体放前面，后面的字体是前面字体的“后备”字体
    • font-family: serif, “Times New Roman”, “微软雅黑”;
    • 字体名称中有空格，必须用引号包裹
    • 中文字体可以称呼它们的英语名字
      • “Microsoft Yahei” 等同于 “微软雅黑”
      • “SimSun” 等价于 “宋体”
    • 字体通常必须是用户计算机中已经安装好的字体
    • 定义新字体，需要我们有新字体 @font-face

段落和行相关属性

  1. text-indent 属性
    • 定义文本内容首行缩进量
  2. line-height
    • 定义行高
    • line-height:30px
    • line-height:1.5 字号的倍数
    • line-height:150% 字号的倍数
  3. 单行文本垂直居中
    • 行高=盒子高度，即可实现单行文本的垂直居中
  4. text-align:center
    • 文字水平居中
  5. font 合写属性
    • font: italic bold 20px/1.5 “阿里妈妈刀隶体 Regular”;