CSS3——字体样式属性


1.font-size:字号大小

  font-size 属性用于设置字号,该属性的值可以使用想相对长度单位,也可以使用绝对长度单位。

相对长度单位 说明
em 相当于当前对象内文本的字体尺寸
px 像素,最常用,推荐使用

 

绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt

  其中,相对长度单位比较常用,推荐使用像素单位 px,绝对长度单位使用较少。

 

2.font-family:字体

  font-family 属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。如将网页中所有段落文本的字体设置为微软雅黑:

 

 

   可以同时指定多个字体,中间用逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体:

 

 

   使用 font-family 设置字体时,需要注意一下几点:

  *  各种字体之间必须使用英文状态下的逗号隔开

  *  中文字体需要加英文状态下的引号,英文字体字体一般不需要引号。当设置英文字体时,英文字体名必须位于中文字体名之前:

 

 

   *  如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号:

 

 

   *  尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

 

3.font-weight:字体粗细

font-weight可用属性值

描述
normal 默认值。定义标准的字符
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100 ~ 900(100的整数倍) 定义由细到粗的字符。其中 400 等同于 normal,700 等同于 bold,值越大字体越粗

  实际中,常用的 font-weight 的属性值为 normal 和 bold,用来定义正常或加粗显示的字体。

 

4.font-style:字体风格

  font-style 属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

  *  normal:默认值,浏览器会显示斜体的字体样式

  *  italic:浏览器会显示斜体的字体样式

  *  oblique:浏览器会显示倾斜的字体样式

  其中 italic 和 oblique 都用于定义斜体,两者在现实效果上并没有本质区别,但实际中常使用 italic。

 

5.font:综合设置字体样式

  font 属性用于对字体样式进行综合设置,其基本语法格式为:

  选择器{font: font-style  font-weight  font-size/line-height  font-family;}

  使用 font 属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。其中 line-height 指的是行高:

 

 

   等价于

 

 

   其中不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用。

 

6.@font-face属性

  @font-face 属性是 CSS3 的新增属性,用于定义服务器字体。通过 @font-face 属性,开发者可以在用户计算机未安装字体时,使用任何喜欢的字体。使用 @font-face 属性定义服务器字体的基本语法格式如下:

  @font-face {

    font-family: 字体名称;

    src: 字体路径;

  }

  其中,font-family 用于指定该服务器字体的名称,该名称可以随意定义,src 属性用于指定该字体文件的路径。

  使用服务器字体的步骤:

  (1)下载字体,并存储到相应的文件夹中

  (2)使用 @font-face 属性定义服务器字体

  (3)对元素应用 “font-family” 字体样式

 

 

 

 

7.word-wrap属性

  word-wrap属性用于实现长单词和 URL 地址的自动换行,其基本语法格式:

  选择器{word-wrap: 属性值;}

word-wrap属性值

描述
normal 只在允许的断字点换行(浏览器保持默认处理)
break-word 在长单位或 URL 地址内部进行换行

 

 

 

 

   由图可看出,当浏览器默认处理时段落文本中的 URL 地址会溢出边框,当 word-wrap 属性值为 break-word 时,URL 地址会沿边框自动换行。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM