CSS字体

原创 2015年11月17日 22:03:49

字体系列

在 CSS 中,有两种不同类型的字体系列名称:

通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或"Monospace")

特定字体系列 - 具体的字体系列(比如 "Times" 或"Courier")

 

除了各种特定字体系列外(如 Times、Verdana、Helvetica 或 Arial),CSS 还定义了 5 种通用字体系列:

Serif字体

这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。例如,小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰,比如小写 l 顶部和底部的短线,或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New CenturySchoolbook。

Sans-serif字体

这些字体是成比例的,而且没有上下短线。Sans-serif字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。

Monospace字体

Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。采用这些字体,每个字符的宽度都必须完全相同,所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线,也可能没有。如果一个字体的字符宽度完全相同,则归类为 Monospace 字体,而不论是否有上下短线。Monospace字体的例子包括 Courier、Courier New 和 Andale Mono。

Cursive字体

这些字体试图模仿人的手写体。通常,它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如,大写 A 再其左腿底部可能有一个小弯,或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 ZapfChancery、Author 和 Comic Sans。

Fantasy字体

这些字体包含某种风格的装饰性字体,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。


font-family属性(即创建一个首选字体列表)可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。


提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。

 

只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。例如:

p{

font-family:”Emblema One”,san-serif;

}


字体风格

font-style 属性最常用于规定斜体文本。


该属性有三个值:

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

 

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

 

字体变形

font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

 

字体加粗

font-weight 属性设置文本的粗细,使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而700 等价于 bold,如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

 

字体大小

font-size 属性设置文本的大小。


font-size 值可以是绝对或相对值。

绝对值:

将文本设置为指定的大小

不允许用户在所有浏览器中改变文本大小(不利于可用性)

绝对大小在确定了输出的物理尺寸时很有用

相对大小:

相对于周围的元素来设置大小

允许用户在浏览器改变文本大小

 

如果没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。


使用像素来设置字体大小

通过像素设置文本大小,可以对文本大小进行完全控制

使用em来设置字体大小

1em 等于当前的字体尺寸。浏览器中默认的文本大小是 16 像素,如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

 结合使用百分比和em

在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值

 

CSS 字体属性

属性

描述

font

简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-size-adjust

当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)

font-stretch

对字体进行水平拉伸。(CSS2.1 已删除该属性。)

font-style

设置字体风格(正常或倾斜)。

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

设置字体的粗细。

 

 

 

css3一款3D字体带阴影效果

效果图如下: 源码如下: CSSReX | Drop Shadow with CSS3 CSSReX 任何的异常都是T...

CSS中文字体转编码

  • 2015年10月08日 20:46
  • 20KB
  • 下载

通过css的@font-face属性,在网页上显示用户电脑没有的字体。

在网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些...
  • rsj1994
  • rsj1994
  • 2016年11月04日 18:45
  • 1211

css字体文本

  • 2015年09月22日 16:44
  • 401KB
  • 下载

css改变字体的一些网页

  • 2009年11月06日 11:16
  • 217KB
  • 下载

CSS,font-family,好看常用的中文字体

CSS,font-family,好看常用的中文字体

CSS中文字体名称对照表

  • 2012年11月12日 15:16
  • 11KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS字体
举报原因:
原因补充:

(最多只允许输入30个字)