[object Object]

选择字体

选择正确的字体，可以为您的文本增添价值，对读者体验网站的方式有很大的影响。正确的字体可以为您的品牌创造强大的标识。

在 CSS 中，我们使用 font-family 属性来指定文本的字体。

注意：字体名称应以逗号分隔。如果字体名称超过一个单词，则必须用引号引起来，例如：“Times New Roman”。

Web 安全字体

Web 安全字体是在所有浏览器和设备上普遍安装的字体。然而，没有 100% 完全安全的 Web 字体。总有可能无法找到字体或无法正确安装字体。

因此，font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。以您想要的字体开始，以通用系列结束。如果第一个字体不起作用，浏览器将尝试下一个，再下一个，依此类推。

安全字体参考：CSS网页安全字体

如果不想使用 HTML 中的任何标准字体，您可以使用免费的 Google Fonts。

使用方法参考：CSS Google 字体

五种 CSS 通用字体系列

衬线字体（Serif ）：在每个字母的边缘都有一条细线。它们营造出一种正式而优雅的感觉。
无衬线字体（Sans-serif）：线条干净（没有小笔画）。它们营造出现代简约的外观。
等宽字体（Monospace ）：此类字体的所有字母都具有相同的固定宽度。它们营造出一种机械感。
草书字体（Cursive ）：模仿人类的笔迹。
幻想字体（Fantasy ）：是装饰性/有趣的字体。

字体搭配基本规则

1. Complement（互为补充）

良好的字体组合应该是协调的，既不能太相似，也不能太不同。

2. Use Font Superfamilies（使用字体超级家族）

字体超级家族是一组旨在协同工作的字体。因此，在同一个字体家族中使用不同的字体是安全的。

例如，Lucida 超家族包含以下字体：Lucida Sans、Lucida Serif、Lucida Typewriter Sans、Lucida Typewriter Serif 和 Lucida Math。

3. Contrast is King（对比为王）

两种过于相似的字体往往会产生冲突。但是，如果以正确的方式进行对比，则可以凸显每种字体的优点。

例如：衬线字体与无衬线字体的组合是一种众所周知的组合。

强大的超级家族包括同一字体的衬线和无衬线变体（例如 Lucida 和 Lucida Sans）。

4. Choose Only One Boss（主字体只有一个）

一种字体应该是最主要的。这为页面上的字体建立了层次结构。这可以通过改变字体的大小、粗细和颜色来实现。

更多搭配参考：CSS优秀字体搭配

文字大小

font-size属性设置文本的大小。

在网页设计中，能够管理文本大小非常重要。但是，您不应使用字体大小调整来使段落看起来像标题，或使标题看起来像段落。

始终使用正确的 HTML 标签，例如，标题使用 <h1> - <h6>，段落使用 <p>。

字体大小值可以是绝对大小（使用像素设置），也可以是相对大小（使用 em 或百分比设置）。

使用像素设置文本大小

可让您完全控制文本大小，当输出的物理尺寸已知时很有用，但不允许用户在所有浏览器中更改文本大小（不利于可访问性）。

如果使用像素，需使用缩放工具调整整个页面的大小。

使用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 设置字体大小，而不是像素。

1 em 等于当前字体大小。浏览器中的默认文本大小为 16 px，如果您未指定字体大小，则普通文本（如段落）的默认大小为 16 px（16 px=1 em）。

可以使用以下公式从像素到 em 计算尺寸：像素/16= em

结合使用百分比和 em

适用于所有浏览器的解决方案是为 <body> 元素设置百分比的默认字体大小。在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小。例如：


body { 
	font-size: 100%;
}
 
h1 { 
	font-size: 2.5em;
}
 
h2 {  
	font-size: 1.875em;
}
 
p { 
	font-size: 0.875em;
}

响应式字体大小

文本大小可以用单位设置 vw，即“viewport width 视窗宽度”。

视窗是浏览器窗口大小。1 vw = 视窗宽度的 1%。如果视窗宽度为 50 厘米，则 1 vw 为 0.5 厘米。

这样，文本大小就会跟随浏览器窗口的大小。例如：


<h1 style="font-size:10vw">Hello World</h1>

字体样式

font-style 属性主要用于指定文本样式。

此属性有三个值：

normal - 文本正常显示
italic - 文本以斜体显示
oblique - 文本“倾斜”（倾斜与斜体非常相似，但支撑较少）

字体粗细

font-weight 属性指定字体的粗细。可以选择 normal（正常）、lighter（细体）、 bold（加粗）等，也可以用具体的数值（如 900）表示。

文本转换

该 text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写（uppercase）或小写（lowercase）字母，或将每个单词的首字母大写（capitalize）。

字体变体

font-variant属性指定文本是否应以小型大写字体显示。

在小型大写字体中，所有小写字母都会转换为大写字母。但是，转换后的大写字母的字体大小会比文本中原来的大写字母小。效果如下：

文字颜色

color 属性用于设置文本的颜色。颜色由以下方式指定：

颜色名称 - 例如“红色”
十六进制值 - 例如“ #ff0000 ”
RGB 值 - 例如“rgb (255,0,0)”

文字阴影

text-shadow 允许您为文本内容添加一个或多个阴影，以增强视觉效果，创建立体感或装饰性文字外观。

参考代码：


text-shadow:
  h-shadow v-shadow blur-radius spread-radius color [,
  ...];

h-shadow （必需）水平阴影偏移量。正数表示向右偏移，负数表示向左偏移。
v-shadow（必需）垂直阴影偏移量。正数表示向下偏移，负数表示向上偏移。
blur-radius（可选）阴影模糊半径。数值越大，阴影越模糊。若不指定，则无模糊效果。
color（必需）阴影颜色。可以是任何有效的 CSS 颜色值，比如 red、#FF0000 或 rgba (255, 0, 0, 0.5)。

text-shadow 属性可以接受一个或多个阴影声明，每个声明之间用逗号 , 分隔。
如果只想为文本创建一个简单的阴影效果，只需提供两个长度值（水平和垂直偏移）和一个颜色值即可。
使用多个阴影效果时，后面的阴影会叠加在前面的阴影之上。

文本修饰

文本装饰线

该 text-decoration-line 属性用于给文本添加装饰线。

提示：可以组合多个值，例如上划线和下划线以在文本上方和下方显示线。

装饰线类型：

overline 上划线
line-through 穿越线/删除线
underline 下划线
overline underline 上划下划双线

注意：不建议给非链接的文本加下划线，因为这通常会让读者感到困惑。

文本装饰颜色

该 text-decoration-color 属性用于设置装饰线的颜色。

装饰线样式

该 text-decoration-style 属性用于设置装饰线的风格，可以设置 solid（实线）、double（双线）、dotted（点线）、dashed（虚线）、wavy（波浪线）等多种风格。

装饰线粗细

该 text-decoration-thickness 属性用于设置装饰线的粗细。

装饰线简写

该 text-decoration 属性是以下属性的简写：

text-decoration-line（必需的）
text-decoration-color（选修的）
text-decoration-style（选修的）
text-decoration-thickness（选修的）

HTML 中的所有链接默认都带有下划线，但有时您会看到链接的样式没有下划线。text-decoration: none; 用于从链接中删除下划线。

文字排版

CSS 列表

不同的列表项标记

list-style-type 属性指定列表项标记的类型。例如：


ul.a {
  list-style-type: circle;
} /*空心圆环无序列表*/
ul.b {
  list-style-type: disc;
} /*实心圆点无序列表*/
ul.c {
  list-style-type: square;
} /*方块无序列表*/
ol.d {
  list-style-type: armenian;
} /*亚美尼亚语有序列表*/
ol.e {
  list-style-type: cjk-ideographic;
} /*cjk表意文字有序列表*/
ol.f {
  list-style-type: decimal;
} /*数字有序列表*/
ol.g {
  list-style-type: decimal-leading-zero;
} /*前面带零的数字有序列表*/
ol.h {
  list-style-type: georgian;
} /*格鲁吉亚语有序列表*/
ol.i {
  list-style-type: hebrew;
} /*希伯来语有序列表*/
ol.j {
  list-style-type: hiragana;
} /*日语平假名有序列表*/
ol.k {
  list-style-type: hiragana-iroha;
} /*日文平假名字符有序列表*/
ol.l {
  list-style-type: katakana;
} /*日语片假名有序列表*/
ol.m {
  list-style-type: katakana-iroha;
} /*日语片假名字符有序列表*/
ol.n {
  list-style-type: lower-alpha;
} /*小写字母有序列表*/
ol.o {
  list-style-type: lower-greek;
} /*小写希腊语有序列表*/
ol.p {
  list-style-type: lower-latin;
} /*小写拉丁语有序列表*/
ol.q {
  list-style-type: lower-roman;
} /*小写罗马有序列表*/
ol.r {
  list-style-type: upper-alpha;
} /*大写字母有序列表*/
ol.s {
  list-style-type: upper-latin;
} /*大写拉丁语有序列表*/
ol.t {
  list-style-type: upper-roman;
} /*大写罗马有序列表*/
ol.u {
  list-style-type: none;
} /*无格式列表*/
ol.v {
  list-style-type: inherit;
} /*继承列表*/

使用图像作为列表项标记

list-style-image 属性指定图像作为列表项标记。例如：


ul { 
	list-style-image: url('sqpurple.gif');
}

定位列表项标记

list-style-position属性指定列表项标记（项目符号）的位置。

“list-style-position: outside;” 表示项目符号将位于列表项之外。列表项每行的开头将垂直对齐。这是默认值。

“list-style-position: inside;” 表示项目符号将位于列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并将文本推到开头。

代码参考：


ul.a { 
	list-style-position: outside;
}
 
ul.b {  
	list-style-position: inside;
}

效果参考：

删除默认设置

该 list-style-type:none 属性还可用于删除标记/项目符号。请注意，列表还具有默认边距和填充。要删除它，请将 margin:0 和添加 padding:0 到 <ul> 或 <ol>。

代码参考：


ul { 
	list-style-type: none;
	margin: 0;
	padding: 0;
}

简写属性

list-style 属性是一个简写属性。它用于在一个声明中设置所有列表属性。例如：


ul { 
	list-style: square inside url("sqpurple.gif");
}

效果参考：

使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，当图像由于某种原因无法显示时将显示此属性的值）
list-style-position（指定列表项标记是否应出现在内容流的内部或外部）
list-style-image（指定图像作为列表项标记）

如果上述某个属性值缺失，则会插入缺失属性的默认值（如果有）。

带颜色的样式列表

我们还可以用颜色来设置列表的样式，使它们看起来更有趣。

添加到 <ol> 或 <ul> 标签的任何内容都会影响整个列表，而添加到 <li> 标签的属性将影响单个列表项。例如：


ol { 
	background: #ff9999;
	padding: 20px;
}
 
ul { 
	background: #3399ff;
	padding: 20px;
}
 
ol li { 
	background: #ffe5e5;
	color: darkred;
	padding: 5px;
	margin-left: 35px;
}
 
ul li { 
	background: #cce5ff;
	color: darkblue;
	margin: 5px;
}

效果参考：

文本缩进

该 text-indent 属性用于指定文本首行的缩进，单位 px 。

字符间距

该 letter-spacing 属性用于指定文本中字符之间的间距，单位 px 。

词间距

该 word-spacing 属性用于指定文本中单词之间的间距。

行高

该 line-height 属性用于指定行之间的间距。

文字方向

direction 和属性 unicode-bidi 可用于改变元素的文本方向。

direction ：指定文本方向/书写方向
unicode-bidi ：与 direction 属性一起使用，以设置或返回是否应重写文本以支持同一文档中的多种语言

代码例如：


p {  
	direction: rtl;
	unicode-bidi: bidi-override;
}

效果参考（第二行）：

白色空间

该 white-space 属性指定如何处理元素内的空白。默认文本自动换行。

如果想禁用文本换行，可参考如下设置：


p { 
	white-space: nowrap;
}

文本对齐

该 text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐（left）或右对齐（right）、居中（center）或两端对齐（justify）。

垂直对齐

该 vertical-align 属性设置行内元素的垂直对齐方式。

baseline：默认值，元素的基线与父元素的基线对齐。
top：元素的顶部与父元素的顶部对齐。
middle：元素的中部与父元素的中部对齐。
bottom：元素的底部与父元素的底部对齐。
text-top：元素的顶部与父元素的文本顶部对齐。
text-bottom：元素的底部与父元素的文本底部对齐。
sub：元素的基线与父元素的下标基线对齐。
super：元素的基线与父元素的上标基线对齐。

需要注意的是，vertical-align 属性对于块级元素并不起作用，只对行内元素有效。此外，不同的元素可能对 vertical-align 属性有不同的表现，例如图片、表格单元格等。

字体简写

为了缩短代码，也可以在一个属性中指定所有单独的字体属性。

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

font-style
font-variant
font-weight
font-size/line-height
font-family

用于 font 在一个声明中设置多个字体属性可参考：


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

注意：font-size 是 font-family 必需的。如果缺少其他值之一，则使用其默认值。