【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP

导读

【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP

字体属性

字体大小

  • 属性名:font-size
  • 作用:控制字体的大小。
  • 语法:
div {
    font-size: 40px;
}
  • 值得注意
    【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP

扩展

  1. 由于字体设计原因,文字最终呈现的大小,并不一定与 font-size 的值一致,可能大,也可能小。
  2. 通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下 一些。

字体族

  • 属性名:font-family
  • 作用:控制字体类型。
  • 语法:
div {
    font-family: "STCaiyun", "Microsoft YaHei", sans-serif
}
  • 值得注意

【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP


字体风格

  • 属性名:font-style
  • 作用:控制字体是否为斜体
  • 常用值:
    • normal 正常(默认值)
    • italic 斜体(使用字体自带的斜体效果))
    • oblique 斜体(强制倾斜产生的斜体效果)

【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP


字体粗细

  • 属性名: font-weight
  • 作用:控制字体的粗细
  • 常用值:
    • 关键词:
      【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP
    • 数值:
      【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP

字体复合写法

  • 属性名: font

  • 作用:将上述所有字体相关的属性复合在一起编写

  • 编写规则:

    • 字体大小、字体族必须都写上
    • 字体族必须是最后一位、字体大小必须是倒数第二位
    • 各个属性间用空格隔开
  • 实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用 fontsize 属性。

  • 语法:

span{
    font: bold italic 100px "微软雅黑";
}

文本属性

文本间距

  • 字母间距:letter-spacing
  • 单词间距: word-spacing (通过空格识别词)
  • 属性值为像素(px),正值让间距增大,负值让间距缩小。

文本修饰

  • 属性名: text-decoration

  • 作用:控制文本的各种装饰线

  • 可选值:

    • none 无装饰线(常用)
    • underline :下划线(常用)
    • overline :上划线
    • line-through : 删除线
  • 可搭配如下值使用:

    • dotted点虚线
    • dashed杠虚线
    • double双下划线
    • wavy:波浪线
    • 也可以指定颜色
  • 语法:

p {
    text-decoration: underline dotted red;
}

文本缩进

  • 属性名:text-indent
  • 作用:控制文本 首字母的缩进
  • 属性值: css 中的长度单位,例如: px ; rem % …

文本水平对齐

  • 属性名: text-align

  • 作用:控制文本的 水平 对齐方式。

  • 常用值:

    • left 左对齐(默认值)
    • right :右对齐
    • center :居中对齐

行高

  • 属性名: line-height

  • 作用: 控制一行文字的高度。

  • 可选值:

    • normal :由浏览器根据文字大小决定的一个默认值。
  1. 像素( px )。
  2. 数字:参考自身 font-size倍数(很常用)。
  3. 百分比:参考自身 font-size 的百分比
  • 应用场景:

    • 对于多行文字:控制行与行之间的距离
    • 对于单行文字:让 height 等于 line-height ,可以实现文字垂直居中
  • 值得注意

【前段基础入门之】=>CSS 常用的字体文本属性-LMLPHP


vertical-align

  • 属性名: vertical-align

  • 作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式

  • 常用值:

    • baseline (默认值):使元素的基线与父元素的基线对齐。
    • top :使元素的顶部与其所在行的顶部对齐。
    • middle :使元素的中部父元素的基线加上父元素字母 x一半对齐。
    • bottom :使元素的底部与其所在行的底部对齐。

注明vertical-align 不能控制元素。


09-29 16:25