前端成长之路：CSS字体、文本属性和引入方式

本文主要介绍CSS的字体属性和文本属性，最后再介绍CSS在HTML中的引入方式。

CSS字体属性

CSS Fonts（字体）属性能用于定义字体系列属性，包括但不限于字体大小、粗细、字体样式等。

字体系列

在CSS中使用font-family属性定义文本的字体系列（如微软雅黑、宋体之类的）：

如果Arial字体（Arial 是一种常见的无衬线字体，广泛应用于各种操作系统和浏览器中。）可用，那么段落标签中的字体系列就是font-family；如果不可用，那么将从左往右依次尝试这些字体。

注意事项：

font-family中可以指定多种字体，会从左往右依次尝试，直到某种字体可用为止；但是各种字体之间必须使用英文逗号进行分隔！
一般情况下，假如有空格隔开的多个单词组成的字体，该字体需要加引号：如"Microsoft Yahei"，由两个单词组成，所以说要加引号。
为了保证页面在各种浏览器中的兼容性，尽量使用系统自带的字体，非特殊情况不使用花里胡哨的字体。
一些常见的字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }。

像素是定义字体大小最常用的单位。
谷歌浏览器默认的字体大小为16px，但是不同浏览器默认的字体大小可能不一致，所以说要尽量设置一个明确的字体大小值，不要使用默认字体大小。
可以通过HTML中的body标签指定整个页面的文字大小（整体布局）。

字体粗细和文字样式

字体粗细

CSS中可以通过font-weight属性指定字体的粗细，normal是font-weight的默认属性值，代表不加粗；bold属性值是加粗。还可以通过不带任何单位的数字定义字体的粗细，数字可以是100-400的任何值，400就等同于normal，700等同于bold，在实际开发中更喜欢使用数字表示粗细。

文字样式

CSS中可以通过font-style属性设置文本风格，normal是font-style的默认属性值，代表无文本风格；通过设置italic属性值可以将字体变为斜体（这和em标签的作用类似），实际开发中其实很少给文字添加斜体，反而更多的将斜体标签改为不倾斜的字体：

这样设置以后，em标签中的文字就不是斜体了，而是标准的字体样式：

字体复合属性

CSS中可以使用font属性来指定字体的复合属性（包括文本风格、字体粗细、字体大小、字体系列等，多个属性都可以在font属性中指定）。但是font属性使用起来必须要十分规范：

1. 使用font属性时，必须按照font-style -> font-weight -> font-size/line-height -> font-family的顺序指定属性值，不能更改顺序，并且各个属性之间通过空格进行分隔

2.不需要设置的属性可以省略，此时会取这些属性的默认值；但是font中必须保留font-size和font-family这两个属性，否则font属性不起作用。

成功通过font属性设置了字体的复合属性。假如font中少了font-family：

那么font属性就不会生效。

CSS文本属性

CSS Text（文本）属性可以定义文本的属性，比如文本的颜色、文本对齐、文本装饰、缩进和行间距等，是页面显示的非常重要的属性。

文本颜色

通过color属性可以定义文本的颜色，定义颜色可以使用三种不同的方式，比如：直接使用预定义的颜色值，如red、green、black等（color: red），这些预定义的颜色使用方便，但是颜色过于单一； 还可以使用颜色对应的RGB代码（color: rgb(255,0,0)或color: rgb(100%,75%,30%)）； 还可以使用颜色的十六进制表示法表示（color: #FF0000，#FF6600），rgb和十六进制表示颜色，色彩丰富，色域广阔，开发中最常用的是十六进制表示法。

文本对齐

在CSS中使用text-align属性设置元素内文本内容对齐的方式，left表示文本内容左对齐（这是默认值）；right表示文本内容右对齐；center表示文本内容居中对齐（这是布局中常用的）。

通过text-align属性设置了段落中的文本居中显示：

文本装饰

通过text-decoration属性可以给文本内容添加装饰，比如文本的下划线、删除线、上划线等。none是默认的属性值，表示没有装饰线；uderline是下划线；overline是上划线（几乎不会使用）；line-through是删除线（这个属性值也是不常用的）。text-decoration中最重要、常用的用法是：因为超链接中的文本自带下划线，可以通过设置<a>标签中的text-decoration属性（设置为none）删除其下划线。

可以通过text-decoration属性删除超链接文本中自带的下划线：因为文本装饰被设置为了none。

文本缩进

在日常生活中，文章中的每一段都是需要首行缩进的，一般缩进量为两个字符。在CSS中可以使用text-indent属性来指定文本的第一行缩进，这个属性一般是用来实现段落的首行缩进。 通过设置text-indent属性，元素的第一行可以缩进指定的长度（这个长度甚至可以是负值）；长度的单位可以是像素，但是使用得更多的单位是em，em是一个相对单位，1个em就是当前元素所设置的font-size的大小（假如font-size设置为100px，那么一个em的大小就是100px），若当前元素没有设置大小，那么em就是其父元素的1个文字的大小。

通过text-indent设置段落的首行缩进：

发现成功在每一段的首行缩进了两个字符，这符合人们的日常生活习惯。

行间距

可以通过line-height属性用于设置行间的距离，这也就是平时说的行高，可以控制文字行与行之间的距离，单位一般使用像素。

明显发现行与行之间的距离变宽了很多，得益于对行高的设置。

CSS引入方式

按照CSS样式表书写的位置（或者说引入的方式），CSS样式表可以分为三类：

行内样式表（行内式）

行内样式表是在HTML元素标签内部的style属性中设定CSS样式，使用十分简单，但是也十分的局限，只适用于修改简单的样式：

\<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱\</div>

这样在一行中就可以简单的为div标签设置CSS样式了，十分的简洁，但是十分的局限与不方便：行内样式表书写十分繁琐，并且没有实现结构和样式分离的思想（HTML专注于结构），而且行内样式表只对当前标签有效，不推荐大量使用；但是要对一个元素添加简单样式时，可以少量使用。

内部样式表（嵌入式）

内部样式表，顾名思义，就是将CSS样式表写在HTML文件的内部，其实现方式就是将所有的CSS抽取出来，放在HTML中的style标签中：

虽然style标签理论上可以放置HTML文档中的任何一个地方，但是一般会放在（开发规范）文档的<head>标签中。通过行内样式表，可以方便的控制当前整个页面中的元素样式设置，虽然看上去代码结构清晰，但是并没有实现结构和样式分离的思想（HTML专注于结构，CSS专注于样式）。

外部样式表（链接式）

大部分的实际开发都是使用外部样式表（最推荐使用）： CSS样式单独写到.CSS文件中，之后把.CSS文件引入到HTML页面中使用。引入分两步：

新建一个后缀为.css的CSS样式文件，在这个CSS文件中编写CSS的代码。
在HTML页面中通过<link>标签引入这个CSS文件，实现外部样式表。

link标签的rel属性是定义当前文档（HTML）和被链接文档（CSS）之间的关系，想要外部引入CSS文件，此处需要指定为"stylesheet"，表示被链接的文档是一个CSS样式表文件。

href属性是定义所连接的外部文档的URL，建议使用相对路径。

使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式。