• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 位置: css3教程 -> css3样式

    css3字体属性

    一、非font相关属性:

    (1).color属性设置字体颜色:

    color:#ccc;

    上述代码可以将字体颜色设置为#ccc。

    属性值可以CSS种任意合法的颜色表示法

    (2).line-height设置行高:

    通过line-height属性可以设置文本在元素中垂直位置。

    代码实例如下:

    <!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>

    通常情况下,会将文本设置为垂直居中,只要将line-height与height设置同值即可。

    (3).text-align设置文本居中方式:

    <!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>

    上述代码设置文本水平居中,当然也可以设置左对齐或者右对齐。

    (4).text-transform设置为本大小写:

    利用此属性可以设置字符的大小写,具有如下几个属性值:

    none : 不进行转换。

    capitalize : 将单词的第一个字符转换为大写,其他字符不做转换。

    uppercase : 将所有字符转换为大写。

    lowercase : 将所有字符转换为小写。


    二、font属性:

    此属性用于设置字体的相关样式,

    font是一个复合属性,可以分解为多个子属性,此属性具有众多子属性。

    下面只介绍一下比较常用的,对于很少使用的子属性不做介绍。

    1.font-style属性:

    此属性用来设置字体样式,代码实例如下:

    <!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>

    可能的属性值如下:

    (1).normal:默认值,正常的字体。

    (2).italic:固定文本为斜体,如果没有斜体的特殊字体,应用oblique。

    (3).oblique:规定为文本为倾斜字体。

    2.font-variant属性:

    此属性用于设置文本以大写形式展现,但是它的字体要比正常字体要小。

    特别说明:此属性对于汉字或者数字不适用。

    代码实例如下:

    <!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>

    代码分析如下:

    (1).对汉字没有任何效果。

    (2).仅对小写字符有效,对大写字符没有效果。

    (3).小写字符虽然被转换为大写,但是字体整体却变小了。

    3.font-weight属性:

    用来设置文本的粗细,非常形象,可以类比于人的体重,体重越大人变得会越粗。

    代码实例如下:

    <!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>

    可能的属性值如下:

    (1).normal:默认值,相当于400。

    (2).bold:设置文本为粗体,相当于700。

    (3).bolder:设置文本为特粗体,功能相当于strong和b的作用。

    (4).lighter:设置文本为细体。

    (5).<integer>:取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。

    属性值挺有意思,数字好像设置文本的重量一般,数字越大,体重越大,自然就越粗。

    4.font-size属性:

    此属性用于设置字体大小,代码实例如下:

    <!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>

    代码说明如下:

    (1).属性值可以是关键字比如smaller等,当然很少有这么使用的。

    (2).更常用的是px、em或者百分比等单位。

    5.font-family属性:

    此属性可以设置字体的名称,通常是一个字体名称序列,用逗号分隔。

    浏览器会从第一个开始尝试查找字体,如果没有找到,则继续向后查找。

    代码实例如下:

    <!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>

    上述代码设置的属性值就是一个字体序列,浏览器会挨个查找。