CSS字体和文本样式设置

1.字体类型（风格） font-style

用于设置字体类型，可设置以下值：

①　normal：普通字体

②　italic：斜体

③　oblique：倾斜字体

2.字体粗细 font-weight

用于设置字体粗细，可设置以下值：

①　normal：正常粗细

②　bold：粗体

③　bolder：更粗的字体

④　lighter：更细的字体

⑤　100~900：步长为100，
400 等同于 normal，而 700 等同于 bold

3.字体大小 font-size

用于设置字体大小的，可设置任意正整数和浮点数,默认情况下，几乎所有的浏览器的默认字体大小都为16px。

扩展
常用单位有三种:px ,em , rem

①　px（像素，相对于显示器屏幕分辨率而言）

②　em（相对当前元素内文本的字体尺寸，会继承父元素大小）

③　rem （相对HTML根元素，最常用的单位）

如果以em为单位时，当前设置的元素继承的大小小于12px时，浏览器（谷歌、360等）接收的最小值为12px,会被强行变为为12px,大于12px，一切正常。如果直接设置px,就可以设置小于12px的值。

4.字体系列 font-family

1.使用中文字体，或带空格的英文字体名，需要用“引号”将该字体名扩起来；

2.单个单词的字体名称则无需加上引号。

3.“font-family”可以有多个值，多个值设置的作用是，当浏览用户本地计算机没有找到设置的第一个值所表示的字体时，会去找第二个，以此类推，若找到最后一个值都没有找到匹配的字体，浏览器则会用自己的默认字体。

4.考虑到网页最终显示效果在不同设备上的一致性，我们通常使用的中文字体只有：“宋体”、“微软雅黑”、“黑体”、“楷体”、“幼圆”等，而目前以“微软雅黑”为最常用设计字体。

5.常用的英文字体有：“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。

html代码：

<body>
    <div>字体样式设置</div>
    <p>今天天气真好</p>
</body>

CSS代码：

<style>
    div{
        font-size: 32px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-style: italic;
            
       }
    p{
        font-weight: bold;
        font-size: 2rem;
       }

</style>

组合值写法

代码：

#e{
    font:normal bold 48px "微软雅黑";
        }

省略字体类型或字体风格之一

1.由于字体类型（风格）和字体粗细，具有一定的相似性，如他们都有一个“normal”值，
2.所以在写“font”属性组合值的时候可以省略二者之一，以辨识到的值进行设置，另外一个自动为“normal”，

3.甚至还能省略掉第前两个值，只保留“font-size”和“font-family”

4.在font内设置文本行高:“font”属性组合值的写法，除了以上所提到的，它还有一种比较不常见，却还比较实用的写法，即可直接在“font”属性内设置文本的行高“line-height”。

代码：

.e{
    font:normal bold 48px/100px "微软雅黑";
    }
        
line-height可设置```<span>和<button>等行内标签的行高

注意：
在“font”组合值的写法中，只有“font-size”和“font-family”这两个的值是不能省略的，而且是缺一不可，否则浏览器会不认识该值，对该组合值进行报错。

font-style和font-weight可以省略，font-size和font-family不可以省略和位置替换。

CSS文本样式设置

1. 文本的颜色 “color”

文本的居中方式“text-align”

该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的，包含三个值：

块级元素元素文本居中：1、转化为行块级设置text-align，前提是设置宽度，且要大于自身的宽度，不然就占满空间了（块级元素占正行)。
2、设置margin:auto。

left（默认）文本左对齐

center文本居中对齐

right文本右对齐