css 字体属性
- font
- 设置或检索对象中的文本特性。该属性是复合属性。
ps一、非font相关属性:
p(1).color属性设置字体颜色:
color:#ccc;
p上述代码可以将字体颜色设置为#ccc。
p属性值可以CSS种任意合法的颜色表示法
p(2).line-height设置行高:
p通过line-height属性可以设置文本在元素中垂直位置。
p代码实例如下:
p<!doctype html><html><head><meta charset=" utf-8"><meta name="author" content="https://www.lanmper.cn/"/><title>字体属性</title><style type="text/css"> div{width:150px; height:40px; background-color:#ccc; line-height:40px;}</style></head><body><div>字体属性</div></body></html>p通常情况下,会将文本设置为垂直居中,只要将line-height与height设置同值即可。
p(3).text-align设置文本居中方式:
p<!doctype html><html><head><meta charset=" utf-8"><meta name="author" content="https://www.lanmper.cn/"/><title>字体属性</title><style type="text/css"> div{width:150px; height:40px; background-color:#ccc; line-height:40px; text-align:center;}</style></head><body><div>字体属性</div></body></html>p上述代码设置文本水平居中,当然也可以设置左对齐或者右对齐。
p(4).text-transform设置为本大小写:
p利用此属性可以设置字符的大小写,具有如下几个属性值:
pnone :不进行转换。
pcapitalize :将单词的第一个字符转换为大写,其他字符不做转换。
puppercase :将所有字符转换为大写。
plowercase :将所有字符转换为小写。
pb
ps二、font属性:
p此属性用于设置字体的相关样式,
pfont是一个复合属性,可以分解为多个子属性,此属性具有众多子属性。
p下面只介绍一下比较常用的,对于很少使用的子属性不做介绍。
ps1.font-style属性:
p此属性用来设置字体样式,代码实例如下:
p<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="https://www.lanmper.cn/"/><title>字体属性</title><style type="text/css">div{height: 30px;}.ant-1{font-style: normal;}.ant-2{font-style: italic;}.ant-3{font-style:oblique;}</style></head><body><div class="ant-1">字体属性一</div><div class="ant-2">字体属性二</div><div class="ant-3">字体属性三</div></body></html>p可能的属性值如下:
p(1).normal:默认值,正常的字体。
p(2).italic:固定文本为斜体,如果没有斜体的特殊字体,应用oblique。
p(3).oblique:规定为文本为倾斜字体。
ps2.font-variant属性:
p此属性用于设置文本以大写形式展现,但是它的字体要比正常字体要小。
ps特别说明:此属性对于汉字或者数字不适用。
p代码实例如下:
p<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="https://www.lanmper.cn/"/><title>字体属性</title><style type="text/css">div{height:30px;}.normal{font-variant:normal;}.small-caps{font-variant:small-caps;}</style></head><body><div class="normal">字体属性一</div><div class="small-caps">字体属性二</div><div class="small-caps">i love antzone</div><div class="normal">i love antzone</div></body></html>p代码分析如下:
p(1).对汉字没有任何效果。
p(2).仅对小写字符有效,对大写字符没有效果。
p(3).小写字符虽然被转换为大写,但是字体整体却变小了。
ps3.font-weight属性:
p用来设置文本的粗细,非常形象,可以类比于人的体重,体重越大人变得会越粗。
p代码实例如下:
p<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="https://www.lanmper.cn/"/><title>字体属性</title><style type="text/css">div{height:30px;}div{font-weight:bold;}</style></head><body><div>字体属性</div></body></html>p可能的属性值如下:
p(1).normal:默认值,相当于400。
p(2).bold:设置文本为粗体,相当于700。
p(3).bolder:设置文本为特粗体,功能相当于strong和b的作用。
p(4).lighter:设置文本为细体。
p(5).<integer>:取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。
p属性值挺有意思,数字好像设置文本的重量一般,数字越大,体重越大,自然就越粗。
ps4.font-size属性:
p此属性用于设置字体大小,代码实例如下:
p<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="https://www.lanmper.cn/"/><title>字体属性</title><style type="text/css">div{height:30px;}.ant-1{font-size:12px;}.ant-2{font-size:150%;}.ant-3{font-size:smaller;}.ant-4{font-size:2em}</style></head><body><div class="ant-1">字体属性一</div><div class="ant-2">字体属性二</div><div class="ant-3">字体属性三</div><div class="ant-4">字体属性四</div></body></html>p代码说明如下:
p(1).属性值可以是关键字比如smaller等,当然很少有这么使用的。
p(2).更常用的是px、em或者百分比等单位。
ps5.font-family属性:
p此属性可以设置字体的名称,通常是一个字体名称序列,用逗号分隔。
p浏览器会从第一个开始尝试查找字体,如果没有找到,则继续向后查找。
p代码实例如下:
p<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="https://www.lanmper.cn/"/><title>字体属性</title><style type="text/css">div{font-family:verdana, geneva, sans-serif}</style></head><body><div>字体属性</div></body></html>p上述代码设置的属性值就是一个字体序列,浏览器会挨个查找。