这里所说的文本润色并不是将某些语句修改下使其变的更有文采，而是使用CSS修饰页面中的文本，改善文本使其在视觉上更加美观

一、文字基本样式

1、字体设置

在CSS样式中，可以定义单个字体，可以多个字体可以同时定义，浏览器在解析时是按顺序进行解析的。

font-family: Arial;
font-family: "微软雅黑", "宋体", Arial, Verdana, "Times New Romen";

在上面多字体例子中，浏览器会先寻找”微软雅黑”，如果没有找到会寻找”宋体”，以次类推

如果字体中包含空格应该用引号引起，中文字体也最好用引号引起

这时候会发现浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体也是因人而异的。这时候CSS3就引入了@font-face
它的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。

语法是这样的：

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

取值说明：

YourWebFontName: 指自定义的字体名称
srource: 指自定义字体的存放路径，可以是相对路径也可以是绝对路径
format: 指自定义字体的格式，主要用来帮助浏览器识别，主要有以下几种类型：
truetype,opentype,truetype-aat,embedded-opentype,avg等
weight: 可以定义字体的粗细
style: 可以定义字体的风格比如：斜体等

一位来自赛艇协会的长者给出了一些人生滴经验:如果项目中是英文网站，而且项目中的Logo，Tags等应用到较多的这种特殊字体效果，建议不要使用图片效果，而使用@font-face，但是如果是中文网站，还是使用图片比较合适，因为加载英文字体和图片没有多大区别，但是加载中文字体，那就不一样了，因为中文字体太大了，这样会影响到项目的某些性能的优化；

2、字形设置

人有高矮胖瘦，字有大小粗细，螃蟹会斜着走，字也会倾斜。

1、font-size

取值:<absolute-size> | <relative-size> | <length> | <percentage> | inherit
- <absolute-size>:绝对字体尺寸
  - 取值：xx-small | x-small | small | medium | large | x-large | xx-large
    - xx-small 最小
    - x-small 较小
    - small 小
    - medium 正常(默认值)，根据字体进行调整
    - large 大
    - x-large 较大
    - xx-large 最大
- <relative-size>:相对字体尺寸(相对与其父容器的字体尺寸)
  - 取值:larger | smaller
    - larger 相对于父容器中字体尺寸进行相对增大使用成比例的em作为单位
    - smaller 相对于父容器中字体尺寸进行相对减小使用成比例的em作为单位
- <length>:CSS长度表示法
- <percentage>:CSS百分比表示法(相对与其父容器的字体尺寸)
- inherit:规定应该从父元素继承字体尺寸

CSS默认的字体尺寸为“medium”,大部分浏览器的默认字体大小为16px

谈谈em和rem

以em为单位

简单写个HTML结构：

<body>
    <h1>这里是h1</h1>
    <p>
        这里是p
        <img src="">
    </p>
</body>

设置CSS样式如下，其中我们设置body的字体为10px

<style type="text/css">
        body{
            font-size: 62.5%; /*10÷16×100%*/
        }
        h1{
            font-size: 1.5em;
        }
        p{
            font-size: 2em;
        }
        p img{
            width: 2em;
            height: 2em;
        }
    </style>

这时候会发现h1的大小为1.510px = 15px p的大小为210px = 20px 但是由于em是基于父元素大小计算的，这时候继承于p的img虽然也是2em，但并不是20px × 20px的，而是40px × 40px的，这样在页面布局中可能由于忽略父元素大小而导致计算出错。
如下图：

以rem为单位

在W3C官网上是这样描述rem的——“font size of the root element”。前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，其他元素都可以以它为参照。
把刚才的CSS代码修改如下：

<style type="text/css">
        html{
            font-size: 62.5%; /*10÷16×100%*/
        }
        h1{
            font-size: 1.5rem;
        }
        p{
            font-size: 2rem;
        }
        p img{
            width: 2rem;
            height: 2rem;
        }
    </style>

就可以得到我们想要的结果了

2、font-weight

该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于关键字 normal，700 等价于 bold。很简单，不写那么多了。虽然我不是那种偷懒的人
可能的值：

3、font-style

该属性设置使用斜体、倾斜或正常字体。
可能的值：

3、字体颜色

color该属性设置文本的颜色，这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
可能的值:

二、段落样式

1、首行缩进

在CSS样式中，通过text-indent属性来设置文本的缩进。取值为百分比数字或者由浮点数字和单位标识符组成的长度值。

允许使用负值。如果使用负值，那么首行会被缩进到左边

可以简单写个例子试下效果：

<style type="text/css">
    p {text-indent: 2em}
</style>
……
<p>
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
</p>
……

效果如下：

2、行高调整

1、准备工作

line-height中顶线、中线、基线和底线
建立如下HTML代码:

<style type="text/css" >
    span{
        padding:0px;
        line-height:1.5;
    }
</style>
<body>
    <div class="test">
        <div style="background-color:#ccc;">
            <span style="font-size:3em;background-color:#999;">中文English</span>
            <span style="font-size:3em;background-color:#999;">English中文</span>
        </div>
    </div>
</body>

如下图从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关

尤其记得基线不是最下面的线，最下面的是底线。
行高、行距与半行距

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

内容区、行内框、行框
内容区：底线和顶线包裹的区域，即下图深灰色背景区域。
行内框：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）

行框（line box）：行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

<div style="background-color:#ccc;">
        <span style="font-size:1em;background-color:#666;">中文English</span>
        <span style="font-size:3em;background-color:#999;">中文English</span>
        <br />
        <span style="font-size:3em;background-color:#999;">English中文</span>
        <span style="font-size:1em;background-color:#666;">English中文</span>
</div>

2、line-height

定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
可能的值

3、计算line-height

有些CSS属性是可继承的（inherited），从层叠的元素里传递下来。这样做是为了方便开发者，不再为后代元素重新设值。对于line-height继承有点复杂，分以下情况

(1)百分比

(2)长度

(3)值：normal

(4)纯数字

一般来说设置行高为纯数字是最理想的方式，因为line-height会随着font-size做相应的缩放

4、字体尺寸对行高的影响

还是直接用代码说明更加直观：

<div style="border:dashed 1px #0e0;margin-bottom:30px;">
    <span style="font-size:14px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;margin-bottom:30px;">
    <span style="font-size:30px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;margin-bottom:30px;line-height: 30px;">
    <span style="font-size:14px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;margin-bottom:30px;line-height: 14px;">
    <span style="font-size:30px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;">
    <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
</div>

效果如下图所示：

行高部分参考和引用了以下两位大神的文章对他们表示衷心的感谢！
CSS行高——line-height
深入了解css的行高Line Height属性