CSS字体属性设置须知

开发 前端
你对CSS字体属性的用法是否熟悉,这里和大家分享一下,设置CSS字体属性是样式表的最常见用途之一,CSS字体属性允许您设置字体系列(font-family)和字体加粗(font-weight)。

本文向大家描述一下CSS字体属性的使用,CSS字体属性允许您设置字体系列(font-family)和字体加粗(font-weight),您还可以设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母)。

CSS字体

CSS字体(font)属性定义文本中的字体。

设置CSS字体属性是样式表的最常见用途之一。CSS字体属性允许您设置字体系列(font-family)和字体加粗(font-weight),您还可以设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母)。

指定CSS字体

可以使用font-family属性在文档中采用某种字体系列。

使用通用CSS字体系列

如果你希望文档使用一种sans-serif字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:

body{font-family:sans-serif;}这样用户代理就会从sans-serif字体系列中选择一个字体(如Helvetica),并将其应用到body元素。因为有继承,这种字体选择还将应用到body元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。

指定CSS字体系列

除了指定通用的字体系列,您还可以通过font-family属性设置更具体的字体。

下面的例子为所有h1元素设置了Verdana字体:

  1. h1{font-family:Georgia;}  
  2.  

这样的规则同时会产生另外一个问题,如果用户代理上没有安装Georgia字体,就只能使用用户代理的默认字体来显示h1元素。

我们可以通过结合特定字体名和通用字体系列来解决这个问题:

  1. h1{font-family:Georgia,serif;}  
  2.  

如果读者没有安装Georgia,但安装了Times字体(serif字体系列中的一种字体),用户代理就可能对h1元素使用Times。尽管Times与Georgia并不完全匹配,但至少足够接近。

因此,我们建议在所有font-family规则中都提供一个通用CSS字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。

如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:

  1. p{font-family:Times,TimesNR,'NewCenturySchoolbook',  
  2. Georgia,'NewYork',serif;}  
  3.  

根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的serif字体。

使用引号

您也许已经注意到了,上面的例子中使用了单引号。只有当一个CSS字体名中有一个或多个空格(比如NewYork),或者如果字体名包括#或$之类的符号,才需要在font-family声明中加引号。

单引号或双引号都可以接受。但是,如果把一个font-family属性放在HTML的style属性中,则需要使用该属性本身未使用的那种引号。
 

【编辑推荐】

  1. CSS三大选择器区别
  2. CSS组合与嵌套用法详解
  3. CSS样式表设计十个雕虫小技
  4. 深入学习六大CSS选择符的使用
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

 

责任编辑:佚名 来源: w3school.com.cn
相关推荐

2010-08-26 10:08:50

CSSmargin

2010-09-06 11:02:59

CSSmargin

2010-08-23 08:53:04

CSSmargin外边距

2021-08-16 11:58:15

CSS颜色属性前端

2020-10-23 08:51:55

CSS

2010-04-27 13:12:04

负载均衡算法

2010-08-25 15:34:48

CSSoverflow

2010-08-30 15:06:04

CSSfont-size

2009-08-17 07:43:42

Linux命令行安装字linux命令行安装彩色字体设置

2010-09-09 16:43:35

DIV+CSS

2010-09-07 14:40:10

title属性Alt属性CSS

2010-08-25 14:26:09

CSSdisplay

2010-09-06 10:21:15

CSS 列表

2010-08-25 16:03:26

CSSborder

2010-08-23 15:33:47

CSSpadding

2010-09-03 14:00:29

CSSbackground

2010-08-25 14:36:35

CSSheightwidth

2010-09-01 13:37:58

CSSclip属性

2010-08-23 08:45:08

CSSpadding内边距

2010-08-25 13:54:29

CSStop
点赞
收藏

51CTO技术栈公众号