您的位置:首页> 前端教程> CSS教程
文章导航

CSS font 字体

2018-12-7 23:42| 作者: admin| 查看: 789| 评论: 0|来自: 蚂蚁部落

本文不但介绍CSS font属性的用法,也会介绍一些常用设置字体样式的属性。

一.非font相关属性:

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

[CSS] 纯文本查看 复制代码
color:#ccc;

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

属性值可以CSS种任意合法的颜色表示法,具体参阅CSS颜色值类型一章节。

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title>
<style type="text/css"> 
div{
  width:150px;
  height:40px;
  background-color:#ccc;
  line-height:40px;
}
</style> 
</head> 
<body> 
<div>蚂蚁部落</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234407ecs7bswqxapq76jp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234428hdacx63qyv1y8eic.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

none : 不进行转换。

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

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

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234451vib5fzy7iz5159mz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码仅演示转换为大写形式的效果,其他效果感兴趣的朋友自行演示。

关于上述更多内容参阅CSS 设置文本样式一章节。

二.font属性:

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

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

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

1.font-style属性:

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234523dmg1497oiiyzbl3p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能的属性值如下:

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

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

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

2.font-variant属性:

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234555ut7jeohyex7xjtcz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

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

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

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

3.font-weight属性:

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{height:30px;}
div{font-weight:bold;}
</style>
</head>
<body>
  <div>蚂蚁部落</div>
</body>
</html>

代码运行效果如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234621nd8pjdooexmebp8c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能的属性值如下:

(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属性:

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234649q214r2yswcy8wzs0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码说明如下:

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

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

5.font-family属性:

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{font-family:Verdana, Geneva, sans-serif}
</style>
</head>
<body>
  <div>蚂蚁部落</div>
</body>
</html>

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

为了字体更加符合实际需求,可能会引入网络字体,具体参阅@font-face的用法一章节。

三.font的复合写法:

font是一个复合属性,可以将各个子属性列出来设置文本字体。

当然也可以使用复合简化形式,但是格式有一些注意点。

考虑到文章的篇幅问题,本文不做介绍,具体参阅CSS font 复合简化格式一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部