前端——CSS字体&文本

字体：

字体是对页面显示的字体进行一个设置，如选择字体，加粗或者斜体。

1. 通用字体

在 CSS 中，有五个通用字体族：

• 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
• 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
• 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
• 草书字体（Cursive）- 模仿了人类的笔迹。
• 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

 2. 字体属性：

• 简写字体属性

　　font 属性是以下属性的简写属性：

1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family

?

1 2 3 4 5 6 7

p.a {   font :  20px Arial ,  sans-serif ; }   p.b {   font :  italic small-caps bold 12px / 30px Georgia,  serif ; }

• font-family（设置字体）

?

1

1. font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性
2. 请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
3. 如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。
4. 可以使用 Google Fonts API 向页面添加数百种其他字体

?

1 2 3

.p 1 {   font-family :  "Times New Roman" , Times,  serif ; }

 

?

1

• font-size（字体大小）

1. px：绝对尺寸     em：相对尺寸     %：百分比     vw：视口宽度”（"viewport width"）
2. 绝对尺寸不管在多少寸的屏幕中，始终保持设置的大小，浏览器中的默认文本大小为 16px。
3. 当设置相对尺寸时，对该合资进行大小的调整，默认大小 1em 为 16px
4. vw尺寸将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放。视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

?

1

• font-style（字体样式）

1. normal - 文字正常显示
2. italic - 文本以斜体显示

?

1

• font-weight（字体粗细）

1. normal：正常粗细
2. lighter：细字体
3. bold：粗字体
4. weight：可以设置字体粗细程度300-900

?

1

• font-variant（字体变体）

1. small-caps：英文大写，首字母正常，其他缩小

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

?

1

文本：

文本是对一段文字的显示方式进行一个调试。颜色，对齐方式等。

• color（文本颜色）

1. 页面的默认文本颜色是在 body 选择器中定义的。

?

1 2 3

h 1 {   color :  green ; }

• background-color（背景颜色）

?

1 2 3 4

h 1 {   background-color :  black ;   color :  white ; }

• text-align（文本对齐）

1. 用于设置文本的水平对齐方式。

?

1 2 3 4 5 6 7 8 9

h 1 {   text-align :  center ; } h 2 {   text-align :  left ; } h 3 {   text-align :  right ; }

• justify（文本等宽）

1. 将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）、

?

1

• direction和unicode-bidi（文本方向）

1. 更改元素的文本方向

?

1

•  vertical-align（垂直对齐）

1. 属性设置元素的垂直对齐方式。

?

1

　

•  text-decoration（文本装饰）

1. text-decoration: none;    连接删除下划线
2. text-decoration: overline  顶部下划线
3. text-decoration: line-through;  中心线（删除线）
4. text-decoration: underline;   底部下划线

?

1

•  text-transform（文本转换）

1. text-transform: uppercase; 全部字母大写

2. text-transform: lowercase; 全部字母小写

3. text-transform: capitalize; 首字母大写

?

1

• text-indent（文字缩进）

1. 指文字第一行的缩进，一般使用em来进行

?

1

• letter-spacing（字母间距）

1. 用于指定文本中字符之间的间距。

?

1

• line-height（文本行高）

1. 用于指定行之间的间距
2. 大多数浏览器中的默认行高大概是 110% 到 120%。

?

1

• word-spacing（文字间距）

1. 用于指定文本中单词之间的间距

?

1

• white-space（文本空白）

1. 元素内部空白的处理方式。（目前来看是不会进行分行处理，全部在一行显示）

?

1 2 3

p {   white-space :  nowrap ; }

•  text-shadow（文本阴影）

1. 水平，垂直，模糊效果，颜色

?

1 2 3

h 1 {   text-shadow :  2px 2px 5px red ; }

文本&图像的水平垂直居中:

1. 使用padding和text-aling：center

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

2. 使用height和line-height

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

3. 使用position和transform

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}