第十五讲：line-height、font-、text-、letter-属性

line-height属性

单行文本行高

【案例】

CSS

*{

margin: 0;

padding: 0;

}

p{

width: 300px;

margin:10px;

line-height: 25px;

font-size: 14px;

border:1px solid skyblue;

}

HTML

单行文本行高单行文本行高单行文本行高

【运行结果】

多行文本行高

【案例】

CSS

*{

margin: 0;

padding: 0;

}

p{

width: 300px;

margin:10px;

line-height: 25px;

font-size: 14px;

border:1px solid skyblue;

}

HTML

【运行结果】

文本垂直居中

单行文本垂直居中

为了严格保证字在行里面居中，我们的工程师有一个约定：行高、字号，一般都是偶数。因为它们的差是偶数就能够被2整除。

【案例】

CSS

*{

margin: 0;

padding: 0;

}

p{

width: 300px;

margin:10px;

height: 36px;

/*语法：行高=盒子高*/

line-height: 36px;

font-size: 14px;

border:1px solid skyblue;

}

HTML

单行文本垂直居中单行文本垂直居中

【运行结果】

多行文本垂直居中

行高=盒子高，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，需要设置盒子的padding。

行高可以用百分比，表示字号的百分之多少。

【案例】

CSS

*{

margin: 0;

padding: 0;

}

p{

width: 300px;

margin:10px;

line-height:22px;

padding:20px 0;

font-size: 14px;

border:1px solid skyblue;

}

HTML

【运行结果】

font属性

使用font属性，能够将字体粗细、字号、行高、字体，一起设置

【语法】

font: 字体加粗 字号/行高 字体;（必须有字号和字体）

如：

font:400 14px/28px "Arial","Times New Roman","微软雅黑","宋体","黑体";

等价于：

font-weight:400;

font-size:14px;

line-height:28px;

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

【注意】

网页中不是所有字体都能用，这个要看用户电脑里装没装这个字体。

在网页中的字体，中文我们一般使用： 微软雅黑（Microsoft YaHei）、宋体（SimSun）、黑体，如果需要其他的字体，我们就需要切图。

英语我们一般使用：Arial 、 Times New Roman。

另外我们要将英语字体，放在中文字体的前面，这样我们就能匹配英语字体。

css其他设置文本样式属性

【首行缩进】

首行空两个汉字，单位em(em就是汉字的一个宽度)。

text-indent:2em;

【字符间距】

letter-spacing:10px;

打赏规则

为了避免对于打赏模式产生误解，说明一下几点内容：

1.打赏纯粹自愿，金额不限；

2.打赏不能作为解答前端技术疑问的理由；

3.打赏不能作为催促更新文章的理由；

4.打赏不能帮你做毕业设计或论文；

5.打赏不能帮你做工作中的项目；

6.总之：打赏就是这不能那不能，只是单纯打赏而已。

声明

* 公众号（QD前端基地）内转载文章全部用于学习交流，如有涉及版权问题请与我联系，我会删除相关文章。给您带来不便敬请谅解，谢谢！

* 公众号（QD前端基地）内原创文章如内容不符合事实或涉及其他方面的问题，请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载，如有雷同纯属巧合。

* 转载公众号（QD前端基地）内的文章，请先与本文作者联系经过同意后方可转载，并注明相关出处和作者信息且留下原文链接地址，这是对文章作者的尊重，也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】：xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号，提供Web前端开发教程，是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下，也许你就成为牛逼的前端高手呢～

微信公众号：qdbase