好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

font

CSS font 属性是用于同时设置、、、、和属性的简写属性。

和其它的CSS简写属性一样, font 属性中未被设置的属性值使用它们各自的初始值,并覆盖之前由非简写的属性设置的值。

使用 font 属性时需要注意以下几条规则:

除了使用关键字的情况之外,该属性必须同时设置 和 属性值。 并非所有的 属性值是被允许的。只有在 CSS 2.1 里规定的值才被允许使用,它们是 normal 和 small-caps 。 尽管 , 和 font-kerning 不会由 font 直接设置,它们仍然会被重置为初始值。 font 属性值的顺序并非完全自由:如需设置 , 和 中任意一个或几个的值,它们必须要放在 值的前面。 值必须紧跟在 之后,并且要在属性值前面加上 “/” 。最后, 是必不可少的,且必须放在最后(inherit 值是无效的)。 通过关键字来使用系统字体

通过在 font 属性中使用预定义的关键字作为值,可以为元素设置某种系统字体。

可以作为设置系统字体的关键字有:

caption :用于标题控件(如按钮,下拉列表等)的字体。 icon :用于标签图标的字体。 menu :菜单中(如下拉菜单和菜单列表)使用的字体。 message-box :用于对话框的字体。 small-caption :用于小标号控件的字体。 status-bar :用于窗口状态栏的字体。

我们只能通过 font 属性来设置系统字体,而不能通过属性来设置。每一个关键字都代表了操作系统中的一类字体。使用某个关键字可以为元素应用当前操作系统中的指定类别的字体。例如,如果使用 font: message-box 会使元素应用当前操作系统对话框的字体作为字体。

系统字体的样式,大小,粗细等只能够同时设置。如果需要的话可以单独对它们进行修改。请注意下面两行使用 font 属性来设置字体的区别:

font: menu;        /* 使用系统菜单字体作为字体 */
font: large menu;  /* 使用一种font-family为"menu"的字体作为字体 */                              
                            
官方语法
font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
                            

当使用 font 属性来设置非系统字体时,语法如下:

font: [font-stretch] [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]
                            

font-family 和 font-size 属性必须设置。 font-size 和之间要使用“/”符号来分隔。

参数:

font-stretch :参考属性的介绍。 font-style :参考属性的介绍。 font-variant :参考属性的介绍。 font-weight :参考属性的介绍。 font-size :参考属性的介绍。 line-height :参考属性的介绍。 font-family :参考属性的介绍。

当使用 font 属性来设置系统字体时,语法如下:

font: caption | icon | menu | message-box | small-caption | status-bar                             
                            
caption :用于标题控件(如按钮,下拉列表等)的字体。 icon :用于标签图标的字体。 menu :菜单中(如下拉菜单和菜单列表)使用的字体。 message-box :用于对话框的字体。 small-caption :用于小标号控件的字体。 status-bar :用于窗口状态栏的字体。

font 属性的初始值为各个单独字体属性的初始值。

应用范围

font 属性可以应用在所有的元素上。

示例代码

例如下面的代码使用 font 属性来设置非系统的字体。

p { font: 12pt/14pt sans-serif }
p { font: 50% sans-serif }
p { font: x-large/110% "Microsoft YaHei", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
p { font: condensed oblique 12pt "Helvetica Neue", serif; }                              
                            

第二行代码的50%表示字体的尺寸为它的父元素字体尺寸的一半。

第三行代码的行高110%表示行高为字体的1.1倍。

第四行代码设置字体为粗体,样式为斜体,字体大小为关键字 large 。

第五行代码设置为小型大写字体( small-caps ),字体大小为它的父元素字体大小的1.2倍,行高是字体大小的1.2倍。

下面的代码使用 font 属性来设置系统字体。

button { font: menu }                             
                            

如果当前操作系统的菜单字体为14像素的“Microsoft YaHei”字体,字体的粗细为600,那么上面的代码会被解析为:

button { font: 600 14px "Microsoft YaHei" }                             
                            

没有被设置的字体属性会被设置为它们各种的初始值:

button {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  font-family: "Microsoft YaHei";
}                              
                            
浏览器支持

所有的现代浏览器都支持 font 属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

查看更多关于font的详细内容...

  阅读:57次

上一篇: min-width

下一篇:overflow

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]