1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

CSS Font Properties 字体属性

本帖由 不学无术2005-12-29 发布。版面名称:前端开发

  1. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    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; }

    文章来源:http://day8.com.cn/web/ro/blogview.asp?logID=415 (感觉有些像苏沈小雨的CSS手册中的)
     
    #1 不学无术, 2005-12-29
    最后编辑: 2005-12-29