• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 位置: css 中文手册 -> css 样式

    css 字体属性

    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上述代码设置的属性值就是一个字体序列,浏览器会挨个查找。