Dzwebs.Net

撰写电脑技术杂文十余年

CSS字体Font语法及实例介紹 上篇

Admin | 2008-5-9 20:53:27 | 被阅次数 | 7956

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

一: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; }

三: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 } 

四: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; }


该杂文来自: 网页制作杂文

上一篇:如何提高网页的显示速度—站长优化技巧

下一篇:CSS字体Font语法及实例介紹下篇

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计