css字体样式

css字体样式(Font Style),属性

时间：2014-05-08 21:49 来源:我爱学习网| 作者:我爱学习网| 本文已影响67838 人

css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识。以下是我精心整理的css字体样式属性知识，供大家学习参考：

css文本样式

序号中文说明标记语法

1 字体样式{font:font-style font-variant font-weight font-size font-family}

2 字体类型{font-family:"字体1","字体2","字体3",...}

3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格{font-style:inherit|italic|normal|oblique}

5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}

6 字体颜色{color:数值;}

7 阴影颜色{text-shadow:16位色值}

8 字体行高{line-height:数值|inherit|normal;}

9 字间距{letter-spacing:数值|inherit|normal}

10 单词间距{word-spacing:数值|inherit|normal}

11 字体变形{font-variant:inherit|normal|small-cps }

12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}

13 ？{font-size-adjust:inherit|none}

14 ？

{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|no rmal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

1. 字体样式：font

语法：{font:font-style font-variant font-weight font-size font-family}

[ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体类形>

作用：简写属性，提供了对字体所有属性进行设置的快捷方法。

注意：字体样式用作不同字体属性的略写，特别是行高。例如P { font: italic bold 12pt/14pt Times, serif }指定该段为bold(粗体)和italic(斜体)Times或serif字体，12点大小，行高为14点。

例子：字体字体

2. 字体类形：font-family

语法：{font-family:字体1,字体2,字体3,...}

作用：调用客户端字体

说明：

·当指定多种字体时，用"，"分隔每种字体名称。

·当字体名称包含两个以上分开的单词时，用""把该字体名称括起来。

·当样式规则外已经有""时，用''代替""。

注意：如果在font-family后加上多种字体的名称，浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体，一旦遇到与要求的相匹配的字体，就按这种字体显示网页内

容，并停止搜索；如果不匹配就继续搜索，直到找到为止，万一样式表里的所有字体都没有安装的话，浏览器就会用自己默认的字体来替代显示网页的内容。

例子：{font-family:黑体,隶书;}字体类型

3．字体大小：font-size

语法：{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

作用：设定文字大小

说明：使用比例关系

·xx-small

·x-small

·small

·medium

·large

·x-large

·xx-large

例子：{font-size:18pt;}字体大小

4. 字体风格：font-style

语法：{font-style:inherit|italic|normal|oblique}

作用：使文本显示为扁斜体或斜体等表示强调

说明：

·inherit继承

·italic 斜体

·normal正常

·oblique偏斜体

5．字体粗细：font-weight

语法：{font-weight:100-900|bold|bolder|lighter|normal;}

作用：设定文字的粗细

说明：

·bold 粗体(相当于数值700 )

·bolder 特粗体

·lighter 细体

·normal 正常体(相当于数值400)

注意：取值范围从数字100~900，浏览器默认的字体粗细为400。另外可以通过参数lighter 和bolder使得字体在原有基础上显得更细或更粗些。

6. 字体颜色：color