当前位置:Gxlcms > html代码 > CSS字体属性_html/css_WEB-ITnose

CSS字体属性_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:11人阅读

CSS字体:

属性

描述

font

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

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-size-adjust

当首选字体不可用时,对替换字体进行智能缩放。

(CSS2.1 已删除该属性。)

font-stretch

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

font-style

设置字体风格。

font-variant

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

font-weight

设置字体的粗细。

1.字体系列:

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

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

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

(2)CSS 还定义了 5 种通用字体系列:

<1>Serif 字体(衬线字体)

这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。对于中文来说,宋体属于serif字体,而对于中文来说,宋体属于serif字体,而英文,常用的serif字体为Times New Roman。

<2>Sans-serif 字体

这些字体是成比例的,而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。对于中文来说,黑体、幼圆、雅黑则属于sans serif字体。而英文,常用的sans serif字体为Arial。

<3>Monospace 字体(固定宽度)

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

<4>Cursive 字体(草书)

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

<5>Fantasy 字体

这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

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

(1)作用:规定元素的字体系列,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

(2)浏览器支持性:所有主流浏览器都支持 font-family 属性。

Ps: 建议在所有 font-family 规则中都提供一个通用字体系列.

2. 字体风格:font-style属性

(1)作用:定义字体的风格;

(2)可能的值:

描述

normal

默认值。浏览器显示一个标准的字体样式。

italic

浏览器会显示一个斜体的字体样式。

oblique

浏览器会显示一个倾斜的字体样式。

inherit

规定应该从父元素继承字体样式。

(3)italic 和 oblique 的区别:

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。

通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

(4)浏览器支持性:所有主流浏览器都支持 font-style属性。

3. 字体变形:font-variant属性

(1)作用:设定小型大写字母;

(2)可能的值:

描述

normal

默认值。浏览器会显示一个标准的字体。

small-caps

浏览器会显示小型大写字母的字体。

inherit

规定应该从父元素继承 font-variant 属性的值。

(3)浏览器支持性:所有主流浏览器都支持 font-variant属性。

4. 字体加粗:font-weight属性

(1)作用:设置文本的粗细;

(2)可能的值:

描述

normal

默认值。定义标准的字符。

bold

定义粗体字符。

bolder

定义更粗的字符。

lighter

定义更细的字符。

100-900

定义由粗到细的字符。400 等同 normal,700 等同 bold。

inherit

规定应该从父元素继承字体的粗细。

(3)浏览器支持性:所有主流浏览器都支持 font-weight属性。

5. 字体大小:font-size属性

(1)作用:设置文本的大小, 实际上它设置的是字体中字符框的 高度;实际的字符字形可能比这些框高或矮(通常会矮);

(2)可能的值:

描述

xx-small

x-small

small

medium

large

x-large

xx-large

把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。

默认值:medium。

smaller

把 font-size 设置为比父元素更小的尺寸。

larger

把 font-size 设置为比父元素更大的尺寸。

length

把 font-size 设置为一个固定的值。

%

把 font-size 设置为基于父元素的一个百分比值。

inherit

规定应该从父元素继承字体尺寸。

(3)比较px和em:

<1>使用像素来设置字体大小:

通过像素设置文本大小,可以对文本大小进行完全控制;在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。虽然可以通过浏览器的缩放工具调整文本大小,但是这实际上是对整个页面的调整,而不仅限于文本。

<2>使用 em 来设置字体大小:

为避免在 Internet Explorer 中无法调整文本的问题,可以使用 em 单位代替 pixels。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

#可以使用下面这个公式将像素转换为 em:

pixels/16=em

(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)

(4)综合使用em和百分比:实现在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。例:

ps:普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。

人气教程排行