css字体属性

字体系列

css使用 font-family属性定义文本的字体系列

<style>
.weiruanyahei{
    font-family:"微软雅黑";
}
</style>

<div class="weiruanyahei"> 微软雅黑</div>

.weiruanyahei { font-family: "宋体"; }

宋体字体

字体粗细

css中使用font-weight来设置字体粗细

<style>
.fontsize {
    font-size: 30px;
}
</style>

<div class="fontsize"> 字体大小 <div>

.fontweight { font-weight: 900; }

粗细

文字样式

css使用font-style来设置文字样式 normal表示正常字体，italic来表示斜体字体

<style>
.fontstyle {
    font-style: italic;
}
</style>

<div class="fontstyle"> 字体大小 <div>

.fontstyle { font-style: italic; }

斜体

字体复合属性

可以使用下面这个代码来规范字体属性注意:font: font-style font-weight font-size font-family;不能更换顺序不需要设置的的属性值可以省略，但是必须保留font-size和font-family属性，否则不起作用

<style>
.font {
    <!-- font: font-style font-weight font-size font-family; -->
    font: italic 700 50px "宋体";
}
</style>

<div class="font"> 字体属性 <div>

.font { font: italic 700 50px "宋体"; }

字体属性

文本属性

文本属性可以定义文本的外观，如颜色，对齐文本，装饰文本，文本缩进，行间距等

文本颜色

color表示字体颜色的设置

颜色定义有三种方式 1·预定于的颜色值：red，green，blue，pink。 2·十六进制表示：#ff0000，#FF6600。 3·RGB代码表示：rgb(255.0.0)/rgb(100%,0%,0%)。

文本对齐

text-align：用于设置元素内文本的水平对齐 left:左对齐（默认值） right:右对齐 center:居中对齐

<style>
    .textalign {
        text-align: center;
    }
</style>

<div class ="textalign"> 我这该死的无处安放的魅力 </div>

.textalign { text-align: center; }

我这该死的无处安放的魅力

装饰文本

text-decoration属性规定添加到文本的装饰。可以给文本添加下划线，删除线，上划线等 1·none:默认，没有装饰(链接默认会有下划线，可以用这个去掉链接的下划线) 2·underline:下划线 3·overline:上划线 4·line-through:删除线

文本缩进

text-indent属性用来指定文本的第一行缩进，通常将段落的首行缩进

em:当前字体元素的一个文字大小单位，是一个相对单位

<style>
    .p {
        text-indent: 10em
    }
</style>
<p> 啊~~  这该死的无处安放的魅力啊！</p>

.p { text-indent: 10em; }

啊~~ 这该死的无处安放的魅力啊！

行间距

line-height属性设置文本行间的距离(行高)，可以控制文本行与行之间的距离。行间距：距离上行的距离和距离下行的距离和字体高度之和(上间距和下间距和字体高度之和)

css文本字体