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

CSS font 复合简化格式

2018-12-8 13:25| 作者: admin| 查看: 793| 评论: 0|来自: 蚂蚁部落

font属性用于设置字体样式,具体参阅CSS font 字体一章节。

本文介绍一下font属性复合简化写法的格式,它子属性众多,只介绍常用的几个:

(1).font-style:设置文本字体样式。

(2).font-variant:设置文本以大写小体形式展现。

(3).font-weight:设置文本的粗细。

(4).font-size:设置文本字体大小。

(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{
  width:200px;
  height:30px;
  background-color:#ccc;
  font:italic small-caps bold 12px/30px Verdana, sans-serif;
}
</style>
</head>
<body>
<div>antzone</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/132556dndj3gdi38jej38n.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很明显font属性的设置已经生效,采用简化写法。

代码分析如下:

(1).italic设置文本为斜体。

(2).small-caps设置文本为大写小体,也就是大写形式,但是字体会变小。

(3).bold:设置文本为粗体。

(4).12px/30px:12px设置字体大小,30px设置行高,将它们整体看做一个子属性。

(5).最后设置的是字体名称,用哪一种字体来绘制文本。

(6).子属性之间用空格分隔,但是为什么font属性最后却是用逗号分隔,后面会详细说明。

注意点说明:

(1).子属性使用空格分隔:

前面讲过,子属性之间用空格分隔,但是为什么font最后是用逗号分隔的。

最后设置的是font-family属性,通常不是一个文本名称,而是一个序列,字体名称之间用逗号分隔,浏览器会按照次序查找是否有对应的字体,如果有则应用,否则继续向后查找。最后一个通常不是某一个字体名称,而是一个通用字体库,也就是一类字体,尽可能保证文本能够在不同操作系统都能够得到正确显示,如果在此字体库中也没有找到合适的字体,那么使用默认字符显示,上述代码中sans-serif(非衬线)就是一个字体库。

上述代码子属性顺序是:

[CSS] 纯文本查看 复制代码
font:font-style font-variant font-weight font-size/line-height font-family;

毫无疑问使用上述顺序是完全正确的,笔者一直是采用上述顺序。

(2).font复合写法的底限:

font复合写法至少要保留font-size与 font-family两个子属性,否则无效。

例如下面代码无效:

[CSS] 纯文本查看 复制代码
font:18px;

本意设置字体大小为18px,然而无效,下面写法是有效的:

[CSS] 纯文本查看 复制代码
font:18px Verdana, sans-serif;

是否可以调整顺序:

笔者本人都是采用上面代码顺序,同时也推荐上述顺序,这是惯例。

如果非要探究顺序是否可以调整,下面是简单测试总结:

(1).前三个子属性可以相互调整顺序。

(2).后面两个子属性不能调整顺序,否则会导致其他子属性失效。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部