字体样式和css文本样式

设置字体属性font-!

1.设置字体属性（用内部样式写在style里）

/* 字体可以用引号包裹也可以不加

★如果楷体也不认识，那么就用浏览器默认的字体

.p1{

font-family: 宋体;

/*font-family: "楷体";*/

}

2.设置字体大小

/* px是物理像素 */

div{

font-size:12px;

}

3.em、rem和px的使用

/*网页一般的一个字符像素大小为16px*/

/* em是根据父元素的大小来显示的 */

/*根据p标签的上一级父元素的font-size的大小成2倍*/

font-size:2em;

}

span{

font-size:32px;

}

由上图可知：p标签的父元素是div，而div大小定义为12px，则p标签下的2em=2*12=24px；

应用：什么情况用em?现在用em比较少，一般是在移动端的适配各种机型（兼容各种手机屏幕大小，页面显示的更好）的时候会用，但是用的比较多的是 rem单位

rem是根据根元素html 的大小来的

使用rem时，根据html字符大小为16px的话，也可以自行更改

html{

/*设置html字体大小的初始像素为14px*/

font-size:14px;

}

div{

/*那么div根据rem由html的大小来算，div字符的大小为2*14=28px，如果前面没有设置html的大小的话，那么像素大小为2*16=32px，div如果有父类标签大小，不受rem影响，依旧以html像素大小计算*/

font-size:2rem;

}

/*测试字体是否是24px*/

font-size:24px;

}

4.字体风格： i em font-style:italic;和font-style: oblique; 都表示斜体的意思

.h{

font-style:italic;

}

.y{

font-style: oblique;

}

.n{

/* 使用font-style:normal;可以把已经斜体的样式改成正常的字体样式 */

font-style:normal;

}

5.字体加粗：使用font-weight属性设置bold /bolder设置成为粗体字体

字体变细：使用font-weight: lighter;可以是字体变细。

.p1{

font-weight: bold;

}

.p2{

/*使用font-weight属性设置bolder 设置成为更粗的字体*/

font-weight: bolder;

}

疑问/解答：bold和bolder设置的字体的粗细都是一样的为什么呢？

bold设置成粗体的以后页面的显示就已经是最大值了所以就算设置了bolder再大也不会发生明显变化,bolder存在的意义就是告诉浏览器我是更粗的字体再语义化上面比bold更加强烈

字体变细： 100、200、300、400、500、600、700、800、900定义由细到粗的字体。

400等同于normal，700等同于bold

h1{

font-weight: lighter;

}

.div1{

font-weight: 500;

}

注意：字体设置到300 就已经是浏览器显示最细的字体的极限了，所以你再往下设置更细的字体，就不会有效果，当你设置到600的时候浏览器粗体的显示就已经是极限了，所以你再加大字体，浏览器也不会有更粗的字体效果了，当你设置成 400 和 500的时候都是标准字体不会加粗也不会变细

6.字体属性简写标准顺序：字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

小妙招：字体类型要放在最后字体风格和字体粗细和颠倒位置其他的不行，也可以显示效果。.p1{

font-family: 宋体;

font-size: 30px;

font-style: italic;

font-weight: bold;

}

.p2{

font:italic bold 30px 宋体;

}

7.文本样式--color属性：RGB、RGBA、颜色英文、十六进制法

8.排版文本段落

/* 宽400px */

width: 400px;

/* 边框1px，实线，红色 */

border: 1px solid red;

/* 把文本排列到右边 */

text-align: right;

/* 把文本排列到左边。默认值：由浏览器决定 */

text-align: left; */

/* 把文本排列到中间 */

text-align: center; */

/* 实现两端对齐文本效果，两端对齐只正针对与文字（中英文都可以） */

text-align: justify;

/* ★text-align left center right 对img依然有用 */

9.首行缩进： text-indent表示首行缩进

<style>

.div1{text-indent: 32px;}

.div2{text-indent: 2em;}

</style>

<body>

<div class="div1">我是根据字像素大小为16px的首行缩进2个字符</div>

</body>

10.设置行高：line-height: Npx;

注：一个字的像素大小为16px，最好设置行高比字符大的像素，小了字体挤得慌。

行高妙用：想设置文字的垂直居中就需要把line-height设置的和高度height的值一样，

现在我想让字体水平方向居中，设置text-align: center;