CSS - 字体与文本

前言： CSS 中的文本和字体属性对于网页设计和用户体验非常重要： 1.提升可读性：通过设置文本样式和字体样式，可以使网页内容更加易读。合适的字体大小、行高和对齐方式可以确保文本排版整齐，减少阅读的困难和疲劳感。 2.增强视觉效果：选择合适的字体样式和颜色可以为网页增添独特的风格和美感，使其与众不同。字体样式的选择也能表达出网页的整体风格和品牌形象。 3.提供多样性选择：CSS 提供了众多字体样式和属性选项，可以根据设计需求选择适合的字体类型、字体粗细和字体风格。这些选项的多样性能够满足不同设计准则和品牌要求。 4.增强语义化：通过合理使用文本样式（如下划线、颜色）和字体样式（如斜体、加粗），可以对内容进行语义化的强调。例如，通过斜体表示引用或特殊词汇，通过加粗表示标题或重要信息。 提升用户体验：清晰易读的文本和选用适合的字体样式不仅仅为用户提供更好的阅读体验，还与网页的整体布局和色彩搭配形成协调一致的视觉效果，从而提升用户对网页的满意度和信任感。

一、字体样式

1.字体大小

• 属性名：font-size
• 取值：数字 + px
• 注意：
  • 谷歌浏览器默认文字大小是16px
  • 单位需要设置，否则无效

示例图：

2.字体粗细

• 属性名：font-weight
• 取值：
  • 关键字：
    • 正常：normal
    • 加粗：bold
  • 纯数字：（100~900的整百数）
    • 正常：400
    • 加粗：700
• 注意：
  • 不是所有字体都提供九种粗细，因此部分取值页面中无变化
  • 实际开发中以：正常、加粗两种取值使用最多

示例图：

3.字体样式

• 属性名：font-style
• 取值：
  • 正常（默认）：normal
  • 倾斜：italic

示例图：

4.字体类型

• 属性名：font-family
• 取值：微软黑雅、黑体、宋体……
• 渲染规则：
  • 从左往右按照顺序查找，如果系统中未安装该字体，则显示下一个字体
  • 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
• 注意：
  • 如果字体名称中存在多个单词，推荐使用引号包裹
  • 最后一项字体系列不需要用引号包裹
  • 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

示例图：

5.font属性

• 属性名：font
• 取值：
  • font：style weight size family
• 省略要求：
  • 只能省略前两个，如果省略了相当于设置了默认值
• 注意：如果需要同时设置单独和连写形式
  • 要么把单独的样式写在连写的下面
  • 要么把单独的样式写在连写的里面

示例图：

二、文本样式

1.文本缩进

• 属性名：text-indent
• 取值：
  • 数字+px
  • 数字+em (1em = 当前标签的font-size的大小)

示例图：

2.文本水平对齐方式

• 属性名：text-align
• 取值：
  • left：左对齐
  • center：居中对齐
  • right：右对齐
• 注意：
  • 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

示例图：

3.文本修饰

• 属性名：text-decoration
• 取值：
  • underline：下划线
  • line-through：删除线
  • overline：上划线
  • none：无装饰线
• 注意：
  • 开发中会使用text-decoration：none；清除a标签默认的下划线

示例图：

4.行高

• 属性名：line-height
• 作用：控制一行的上下间距
• 取值：
  • 数字 + px
  • 倍数（当前标签font-size的倍数）
• 应用：
  • 让单行文本垂直居中可以设置line-height：文字父元素高度
  • 网页精准布局时，会设置line-height：1 可以取消上下间距
• 行高与font连写的注意：
  • 如果同时设置了行高和font连写，注意覆盖问题
  • font：style weight size/line-height family;

示例图：

5.拓展

1.颜色

• 属性名：
  • 文字颜色：color
  • 背景颜色：background-color
• 属性值：
  • 关键字：red、green、bule……
  • rgb：红绿蓝三原色，每项取值范围（0~255），如rgb(0，0，0)
  • rgba：红绿蓝三原色 + a表示透明度，a的取值范围（0~1），如rgba(255，255，255，0.5)
  • 十六进制表示法：#开头，将数字转换成十六进制表示，如#000000，简写#000

2.margin

• margin：0 auto 可以实现div、p、h水平居中
• 注意：
  • 如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
  • margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度