This is bssn’s weblog, which is about Bssn’s Internet Life, IT information, webmaters and etc.

CSS Font Properties 字体属性

————————————–
Font Properties 属性
CSS Version 版本
Compatibility 兼容性
Inherit From Parent继承性
Description 简介
————————————–
font CSS1/CSS2 IE4+ , NS4+ 有 复合属性。设置或检索对象中的文本特性
color CSS1 IE4+ , NS4+ 有 检索或设置对象的文本颜色
font-family CSS1 IE4+ , NS4+ 有 设置或检索用于对象中文本的字体名称序列
font-size CSS1 IE4+ , NS4+ 有 设置或检索对象中的字体尺寸
font-size-adjust CSS2 NONE 有 设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸
font-stretch CSS2 NONE 有 设置或检索用于对象中文本的文字是否横向的拉伸变形
font-style CSS1 IE4+ , NS4+ 有 设置或检索对象中的字体样式
font-weight CSS1 IE4+ , NS4+ 有 设置或检索对象中的文本字体的粗细
text-decoration CSS1 IE4+ , NS4+ 无 检索或设置对象中的文本的装饰,如下划线、闪烁等
text-underline-position IE专有属性 IE5.5+ 有 设置或检索text-decoration属性定义的下划线的位置
text-shadow CSS2 NONE 无 设置或检索对象中文本的文字是否有阴影及模糊效果
font-variant CSS1 IE4+ , NS6+ 有 设置或检索对象中的文本是否为小型的大写字母
text-transform CSS1 IE4+ , NS4+ 有 检索或设置对象中的文本的大小写
line-height CSS1 IE4+ , NS4+ 有 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
letter-spacing CSS1 IE4+ , NS6+ 有 检索或设置对象中的文字之间的间隔
word-spacing CSS1 IE4+ , NS6+ 有 检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用

说明:这种颜色是CSS2标准属性。这种颜色是IE建议样式表属性。这种颜色是NS私有属性。这种颜色是目前尚无浏览器支持的属性。

Font
———-
语法:

font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar

参数:

该属性是复合属性。第一种声明方式请参阅各参数对应的属性。
第二种声明方式中的参数属于CSS2。
caption : 使用有标题的系统控件的文本字体(如按钮,菜单等)
icon : 使用图标标签的字体
menu : 使用菜单的字体
message-box : 使用信息对话框的文本字体
small-caption : 使用小控件的字体
status-bar : 使用窗口状态栏的字体

说明:

设置或检索对象中的文本特性。该属性是复合属性。
第一种声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
对于如何使用用户端系统可能没有的字体,可以参阅@font-face规则。
对应的脚本特性为font。请参阅我编写的其他书目。

示例:

p { font: italic small-caps 600 12pts/18pts 宋体; }
p { font: italic small-caps 600 12pts/150% Courier; }
p { font: italic small-caps 600 12pts/1.5 Courier; }
p { font: italic small-caps 600 12pts/18pts Courier; }
p { font: /18pts serif; }
p { font: oblique 100 24pts; }
H1 { font: 15pt/17pt bold “Arial” normal }

Color
———-
语法:

color : color

参数:

color :  指定颜色。请参阅颜色单位和附录:颜色表

说明:

检索或设置对象的文本颜色。无默认值。
注意,用颜色名称指定color不被一些浏览器接受。
对应的脚本特性为color。请参阅我编写的其他书目。

示例:

div {color: #345456; }
div { color: rgb(100,14,200); }
div {color: menu; }
div {color: red; }

font-family
语法:

font-family : name
font-family : cursive | fantasy | monospace | serif | sans-serif

参数:

name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用引号括起
第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列,将提供默认字体序列

说明:

设置或检索用于对象中文本的字体名称序列。
默认值由浏览器确定。
序列可包含嵌入字体字体。请参阅@font-face规则。
对应的脚本特性为fontFamily。请参阅我编写的其他书目。

示例:

div.fixedwidth { font-family: Courier, “Courier New”, monospace }

font-size
语法:

font-size : absolute-size | relative-size | length

参数:

absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large | xx-large
relative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。larger | smaller
length : 百分数 | 由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅长度单位

说明:

设置或检索对象中的字体尺寸。
默认值为absolute-size的medium值。
对应的脚本特性为fontSize。请参阅我编写的其他书目。

示例:

p { font-style: normal; }
p { font-size: 12px; }
p { font-size: 20%; }

font-size-adjust
———-
语法:

font-size-adjust : none | number

参数:

none : 允许字体序列中每一字体遵守它的自己的尺寸
number : 为字体序列中所有字体强迫指定同一尺寸

说明:

设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸。
目前IE5.5尚不支持此属性。
对应的脚本特性为fontSizeAdjust。请参阅我编写的其他书目。

示例:

p { font-family: arial, courier; font-size-adjust: none; }
p { font-family: verdana, courier; font-size-adjust: .56; }

font-stretch
———-
语法:

font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

参数:

normal : 不应用拉伸变形
narrower : 使用比当前设置的值导致字体宽度更小的值
wider : 使用比当前设置的值导致字体宽度更大的值

说明:

设置或检索用于对象中文本的文字是否横向的拉伸变形。
改变是相对于浏览器显示的字体的正常宽度的。
目前IE5.5尚不支持此属性。
对应的脚本特性为fontStretch。请参阅我编写的其他书目。

示例:

p { font-stretch: wider; }
p { font-stretch: ultra-expanded; }

font-style
———-
语法:

font-style : normal | italic | oblique

参数:

normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
oblique : 倾斜的字体

说明:

设置或检索对象中的字体样式。
对应的脚本特性为fontStyle。请参阅我编写的其他书目。

示例:

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

font-weight
———-
语法:

font-weight : normal | bold | bolder | lighter | number

参数:

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

说明:

设置或检索对象中的文本字体的粗细。
作用由用户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说,用户可能看不到不同值之间的差异。
对应的脚本特性为fontWeight。请参阅我编写的其他书目。

示例:

span { font-weight:800; }

text-decoration
———–
语法:

text-decoration : none || underline || blink || overline || line-through

参数:

none :  无装饰
blink :  闪烁
underline :  下划线
line-through :  贯穿线
overline :  上划线

说明:

检索或设置对象中的文本的装饰。
有href特性的a,以及u,ins对象默认值为underline 。
对象strike,s,del,默认值是line-through。
没有文本的对象此属性不会作用。
对应的脚本特性为textDecoration。请参阅我编写的其他书目。

示例:

div { text-decoration : underline; }
div { text-decoration : underline overline; }

text-underline-position
———-
语法:

text-underline-position : below | above

参数:

below :  在文本下面
above :  在文本上面

说明:

设置或检索text-decoration属性定义的下划线的位置。
对应的脚本特性为textUnderlinePosition。请参阅我编写的其他书目。

示例:

p { text-underline-position: above; text-decoration: underline; }

text-shadow
———-
语法:

text-shadow : color || length || lenth|| opacity

参数:

color :  指定颜色。请参阅颜色单位和附录:颜色表
length :  由浮点数字和单位标识符组成的长度值。可为负值。第一个length指定阴影的水平延伸距离。第二个length指定阴影的垂直延伸距离。请参阅长度单位
opacity :  由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个length全部设定为0。请参阅长度单位

说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。
可以设定多组效果,方式是用逗号隔开。
可以被用于伪类:first-letter和 :first-line。
目前IE5.5尚不支持此属性。
对应的脚本特性为textShadow。请参阅我编写的其他书目。

示例:

p { text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px -5px; }
p:first-letter { font-size: 36px; color: red; text-shadow: red 0px 0px 5px;}

font-variant
语法:

font-variant : normal | small-caps

参数:

normal : 正常的字体
small-caps : 小型的大写字母字体

说明:

设置或检索对象中的文本是否为小型的大写字母。
对应的脚本特性为fontVariant。请参阅我编写的其他书目。

示例:

span { font-variant: small-caps; }

text-transform
———-
语法:

text-transform : none | capitalize | uppercase | lowercase

参数:

none :  无转换发生
capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
uppercase :  转换成大写
lowercase :  转换成小写

说明:

检索或设置对象中的文本的大小写。
对应的脚本特性为textTransform。请参阅我编写的其他书目。

示例:

div { text-transform : uppercase; }

line-height
语法:

line-height : normal | length

参数:

normal :  默认行高
length :  百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位

说明:

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
如行内包含多个对象,则应用最大行高。此时行高不可为负值。
对应的脚本特性为lineHeight。请参阅我编写的其他书目。

示例:

div {line-height:6px; }
div {line-height:10.5; }

letter-spacing
语法:

letter-spacing : normal | length

参数:

normal :  默认间隔
length :  由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位

说明:

检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外。
对应的脚本特性为letterSpacing。请参阅我编写的其他书目。

示例:

div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }

word-spacing
———-
语法:

word-spacing : normal | length

参数:

normal :  默认间距
length :  由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位

说明:

检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用。
对应的脚本特性为wordSpacing。请参阅我编写的其他书目。

示例:

div { word-spacing : 10; }
div { word-spacing : 10px; }

随机日志

Leave a Reply