CSS有哪些好用的字体属性？

本文创建于2020年9月，以下为正文：

CSS中有哪些字体属性呢？

font：复合属性。设置或检索对象中的文本特征。

font-style：设置或检索对象中的字体样式。用于定义字体的风格，如：斜体（italic）等等。

font-variant：设置或检索对象中的文本是否为小型的大写字母。

font-weight：设置或检索对象中的文本字体的粗细。

font-size：设置或检索对象中的字体尺寸，在开发中12px字体最常用。

font-family ：设置或检索用于对象中文本的字体名称序列；用于定义字体的样式，如黑体，宋体等等。

1.color规定文本的颜色

定义元素内文字颜色

语法：color：颜色名|十六进制|RGB

1>预定义的颜色值，如red,green,blue等。

2>十六进制，如#FF0000，#FF6600等。实际工作中，十六进制是最常用的定义颜色的方式。

3>RGB代码，如红色可以表示为rgb（255，0，0）或rgb(100%,0%,0%).

如：

div{color:red;}

div{color:#ff0000;}

div{color:rgb(255,0,0);}

div{color:rgba(255,0,0,.5);}

2.font-style 指定文本的字体样式（正常、斜体）

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。

默认值 normal

normal 正常字体

italic 斜体字

p{font-style:italic;}

3.font-size 指定文本字体大小

通过像素来指定字体大小 1px=1像素

font-size：绝对单位|相对单位分别为：px像素|em/%

p{font-size:12px;}

4.font-family定义文本使用某个字体

默认值 由浏览器确定

示例：

font-family：Microsoft YaHei;

font-family：“Microsoft YaHei","Simsun”，“SimHei";

5.font-weight 指定文本的粗细

字体加粗除了用b和strong标签之外，可以使用CSS来实现。

normal：默认值。定义标准的字符。

bold：定义粗体字符

bolder：定义更粗的字符

lighter：定义更细的字符

100~900：定义由粗到细的字符。400等同于normal，而700等同于 old 。

inherit：规定应该从父元素继承字体的粗细。

设置三个段落的字体的粗细：

p.nomal{font-weight:normal;}

p.thick{font-weight:bold;}

p.thicker{font-weight:900;}

6.letter-spacing

设置字的间距(增加或减少)

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal就相当于值为0.

如：div{letter-spacing：2px;}

normal：默认。规定字符间没有额外的空间。

length：定义字符间的固定空间（允许使用负值）。

inherit：规定应该从父元素继承letter-spacing属性的值。

7.opacity

设置颜色的透明度，整个元素都会透明

默认值1，取值为0-1

1为不透明，0为完全透明

示例：

p{opacity：0；}

隐藏一个元素，完全不显示，但是会占空间，只是看不到

p{opacity:1;}

显示一个元素 它和rgba中的”a“作用一样

8.overflow：hidden|auto|scroll

当内容溢出元素框时隐藏|自动|显示滚动条

visible：默认值。内容不会被修剪，会呈现在元素框之外。

hidden：内容会被修剪，并且其余内容是不可见的。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。

inherit：规定应该从父元素继承overflow属性的值。

设置overflow属性代码：

div

{

width：150px;

height:150px;

overflow:scroll;

}

9.text-overflow

让溢出的文字以省略号显示

p{height:20px; width:100px;background:#ddd;}

width-space：nowrap; 让文字在同一行显示，不换行

overflow：hidden； 溢出部分隐藏

text-overflow：ellipsis； 文字一处部分省略号显示，另外一个值为clip

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）

---

小伙伴也可以加一下QQ群，可以获取资源以及更多学习方法哦

QQ群：1126277960 （暗号：CSDN）