DIV+CSS基础DIV+CSS补充知识:关于CSS字体的各项设置

DIV+CSS补充知识:关于CSS字体的各项设置

很久以前可能你使用过<font>标签来设置字体,但并不建议这么做,因为通过CSS可以很方便的设置字体相关的属性,CSS关于字体的属性是font

1. 定义字体系列 font-family属性

body {font-family:sans-serif;}

这里定义的sans-serif是无衬线字体,是一种通用字体系列,当CSS设置字体为sans-serif,浏览器就会从这个字体系列中选择一个字体来显示。

除了定义为字体系列,还可以定义具体的字体名称,如Georgia,Verdana,宋体等,通常为了保证用户的浏览效果,我们会定义多个相近的字体,避免用户的访问设备上未安装对应的字体,如:

body {font-family:Verdana,Arial,微软雅黑,宋体;}

定义的多个字体之间用逗号隔开,如果用户的设备上没有第一个字体,那么就会以第二个字体来显示,以此类推。如果给body标签定义了字体,根据继承性,则网页其他标签的字体都会按照该字体来显示,除非给某元素又定义了新的字体。

中文字体的名称可以用相应的英文来表示,如微软雅黑和宋体可以写为"Microsoft YaHei"SimSun,如果字体名称本身含有空格,请五笔务必给该字体名称加上引号。

2. 定义字体风格 font-style属性

font-style:normal 表示文本以正常风格显示

font-style:italic 表示文本以斜体显示

font-style:oblique 表示文本倾斜显示

关于italic和oblique的区别,italic指的是一种单独的字体风格,对每个字母的结构有一些小改动,来反映外观的变化,不一定每种字体都带有这种风格,而oblique指的是将正常竖直文本倾斜,在浏览器中,这两种属性显示的效果没有太大的区别。在中文网页中,文字的斜体属性并不经常使用,了解即可。

3. 定义字体加粗程度 font-weight属性

font-weight:normal 表示字体正常显示不加粗

font-weight:bold 表示字体加粗显示

font-weight:bolder 定义更粗的字符

font-weight:lighter 定义更细的字符

还可以用数字来表示文本的粗细程度,比如font-weight:400就是正常的文本粗细程度,而font-weight:700则和font-weight:bold显示效果是相同的。理论上文字粗细程度最小可以设置为100,最大可以设置为900……

4. 字体大小 font-size属性

字体的大小可以设置为像素值,例如font-size:16px表示文本大小为16像素;

字体大小可以用em单位来设置,1个em单位相当于当前元素的字体大小,比如网页默认字体大小是16px,如果设置2em就是32px;

字体大小也可以用百分比来表示,常见的做法是将body标签的字体大小设置为font-size:100%,然后其他元素相对于body来设置相对单位的字体大小。

除了以上几种属性分开的写法,CSS所有的字体属性可以简写在一起,例如:

body {font:italic bold 12px/30px arial,sans-serif;}

使用font标签,依次写上字体风格,加粗程度,字体大小和行间距,字体名称……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/16.html