×
CSS 教程CSS 简介CSS 语法CSS Id 和 Class选择器CSS 创建CSS Backgrounds(背景)CSS Text(文本)CSS Fonts(字体)CSS 链接(link)CSS 列表样式(ul)CSS Table(表格)CSS 框模型CSS Border(边框)CSS 轮廓(outline)属性CSS Margin(外边距)CSS Padding(填充)CSS 分组和嵌套CSS 尺寸 (Dimension)CSS Display(显示)CSS Positioning(定位)CSS Float(浮动)CSS Align( 对齐)CSS 组合选择符CSS 伪类CSS 伪元素CSS 导航栏CSS 图片廊CSS 图像透明/不透明CSS 图像拼合技术CSS 媒体类型CSS 属性选择器CSS 总结CSS 实例

CSS3 教程

CSS3 教程CSS3 简介CSS3 边框(Borders)CSS3 背景CSS3 渐变CSS3 文本效果CSS3 字体CSS3 2D 转换CSS3 3D 转换CSS3 过渡CSS3 动画CSS3 多列CSS3 用户界面

CSS 参考手册

CSS 参考手册 CSS 选择器 CSS 语音参考 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值 CSS 颜色名 CSS 十六进制颜色 

CSS Fonts(字体)


CSS字体属性定义字体,加粗,大小,文字样式。


sserif和sans-serif字体之间的区别

Serif vs. Sans-serif

Remark 在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读


CSS字型

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

  • 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")
  • 特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier")
Generic family 字体系列 说明
Serif Times New Roman
Georgia
Serif字体中字符在行的末端拥有额外的装饰
Sans-serif Arial
Verdana
"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace Courier New
Lucida Console
所有的等宽字符具有相同的宽度


字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

多个字体系列是用一个逗号分隔指明:

实例

p{font-family:"Times New Roman", Times, serif;}

尝试一下 »

对于较常用的字体组合,看看我们的 Web安全字体组合


字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值:

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)

实例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

尝试一下 »


字体大小

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

能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。

请务必使用正确的HTML标签,就<h1> - <h6>表示标题和<p>表示段落:

字体大小的值可以是绝对或相对的大小。

绝对大小:

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小:

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

Remark 如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。


设置字体大小像素

设置文字的大小与像素,让您完全控制文字大小:

实例

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

尝试一下 »

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 调整文本大小。

注意:以上实例不能在IE9以前的版本运行。

虽然可以通过浏览器的缩放工具调整文本大小,但是,这种调整是整个页面,而不仅仅是文本


用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

尝试一下 »

在上面的例子,em的文字大小是与前面的例子中像素一样。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。

不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。


使用百分比和EM组合

在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比:

实例

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

尝试一下 »

我们的代码非常有效。在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。


Examples

更多实例

设置字体加粗
这个例子演示了如何设置字体的加粗。

可以设置字体的转变
这个例子演示了如何设置字体的转变。

在一个声明中的所有字体属性
本例演示如何使用简写属性将字体属性设置在一个声明之内。


所有CSS字体属性

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)