【前端基础】1 - 3 CSS 字体与文本样式

§1-3 CSS 字体与文本样式

目录

• §1-3 CSS 字体与文本样式
  • 1-3.1 字体样式
  • 1-3.2 文本样式

1-3.1 字体样式

字体样式有字体系列、字体大小、字体风格、字体粗细。

字体样式	示例	说明
font-family: font	font-family: "Times New Roman" font-family: "Courier New", "宋体", serif	使用指定字体系列，多个字体系列使用 , 分隔
font-size: size	font-size: 16px font-size: 1em	指定字体大小
font-weight: weight	font-weight: light font-weight: 900	指定字体粗细
font-variant: variant	font-variant: small-caps	主要用于显示小型大写字母文本
font-style: style	font-style: italic font-style: oblique font-syle: oblique 5deg	指定字体风格

注意：

• 指定字体系列：CSS 中有两种类型字体系列名称，为通用字体系列和特定字体系列；
  • 通用字体系列：拥有相似外观的字体系统组合，如 serif, sans-serif, monospace, math 或 fangsong；
  • 特定字体系列：一个特定字体系列，如 Times 或 Courier；
• 指定文本大小：
  • 若不指定文本大小，默认大小为 16 像素（16px = 1em）；
  • 使用 em 指定文本大小可以避免在 Internet Explorer 中无法调整文本的问题，转换公式为 px/16 = em；
  • 字体大小既可以为绝对大小，也可以为相对大小。默认情况下，设置 body 元素的字体大小是百分比，结合 em 使用，可在所有浏览器中显示相同文本大小，并允许所有浏览器缩放文本大小；
• font-variant：主要用于设置显示小型大写字母文本，支持三个值：
  • normal：默认，显示标准字体；
  • small-caps：显示小型大写字母文本；
  • inherit：规定应该从父元素继承 font-variant 的值；
• 指定字体风格：italic 和 oblique 都可用于设置字体斜体。但不同的是，若字体本身无斜体样式，italic 则不生效，而 oblique 可实现文字倾斜，并且可支持自定义倾斜角度；

1-3.2 文本样式

文本样式有文本颜色、文本水平对齐方式、首行缩进、行高、装饰、文本图片对齐等。

文本样式	示例	说明
color	color: red color: #F00 color: grb(0, 255, 255) color: rgba(0, 255, 255, 80%) color: hsl(120, 100%, 25%) color: hsla(240, 100%, 25%, 0.05)	将文本颜色更改为 color
direction	direction: ltr（默认） direction: rtl direction: inherit	文字方向
letter-spacing	letter-spacing: normal（默认） letter-spacing: 2px letter-spacing: -3px letter-spacing: inherit	字符间距（允许负值）
line-height	line-height=32px	文本行高（不允许负值）
text-align	text-align: center	文本水平对齐
text-decoration	text-decoration: underline blue	文本装饰
text-indent	text-indent: 2em	文本首行缩进
text-shadow	text-shadow: h-shadow v-shadow blur color	文本阴影
text-transform	text-transform: none（默认） text-transform: capitalize（单词首字母大写） text-transform:uppercase（全大写） text-trasform:lowercase（全小写） text-transform:inherit（继承）	文本转换
vertical-align	.image {vertical-align: middle}	垂直对齐

注意：

• line-height 支持以下值：
  • normal，默认，设置合理行间距；
  • number，设置数字，此数字与当前字体尺寸相乘以设置行间距；
  • length，设置固定行间距；
  • %：基于当前字体尺寸的百分比设置行间距；
  • inherit：从父元素继承；
• text-align 支持以下值：
  • left：居左水平对齐；
  • center：居中水平对齐；
  • right：居右水平对齐；
  • justify：每一行被展开为宽度相等，左右外边距对齐（如报纸、杂志）；
• text-decoration 是 text-decoration-line, text-decoration-color 和 text-decoration-style 的缩写。该字段支持以下值：
  • none，默认，无文本装饰，定义标准文本；
  • underline，下划线；
  • overline，上划线；
  • line-through，删除线；
  • blink，闪烁文本；
  • inherit，从父元素继承 text-decoration 属性值；
• text-shadow 设置文本阴影，可接受四个参数，其中 h-shadow 和 v-shadow为必需属性，blur 表示模糊距离，color 表阴影颜色；
• vertical-align 用于指定行内元素或表格单元格元素的垂直对齐方式，默认为基线对齐（baseline），可用于调整图片文字居中。