使用CSS属性定义文本的字体系列

更新时间:2023-06-21 04:19:16 阅读: 评论:0

使⽤CSS属性定义⽂本的字体系列胡敏读故事记单词
CSS 字体属性定义⽂本的字体系列、⼤⼩、加粗、风格(如斜体)和变形(如⼩型⼤写字母)。
CSS 字体系列
在 CSS 中,有两种不同类型的字体系列名称:
通⽤字体系列 - 拥有相似外观的字体系统组合(⽐如 "Serif" 或 "Monospace")
特定字体系列 - 具体的字体系列(⽐如 "Times" 或 "Courier")
除了各种特定的字体系列外,CSS 定义了 5 种通⽤字体系列:
Serif 字体
Sans-rif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
如果需要了解更多有关字体系列的知识,请阅读 CSS 字体系列。
指定字体系列
使⽤ font-family 属性定义⽂本的字体系列。
使⽤通⽤字体系列
如果你希望⽂档使⽤⼀种 sans-rif 字体,但是你并不关⼼是哪⼀种字体,以下就是⼀个合适的声明:
body {font-family: sans-rif;}
这样⽤户代理就会从 sans-rif 字体系列中选择⼀个字体(如 Helvetica),并将其应⽤到 body 元素。因为有继承,这种字体选择还将应⽤到 body 元素中包含的所有元素,除⾮有⼀种更特定的选择器将其覆盖。
指定字体系列
除了使⽤通⽤的字体系列,您还可以通过 font-family 属性设置更具体的字体。
下⾯的例⼦为所有 h1 元素设置了 Georgia 字体:
h1 {font-family: Georgia;}
这样的规则同时会产⽣另外⼀个问题,如果⽤户代理上没有安装 Georgia 字体,就只能使⽤⽤户代理的默认字体来显⽰ h1 元素。
我们可以通过结合特定字体名和通⽤字体系列来解决这个问题:
galanth1 {font-family: Georgia, rif;}
如果读者没有安装 Georgia,但安装了 Times 字体(rif 字体系列中的⼀种字体),⽤户代理就可能对 h1 元素使⽤ Times。尽管 Times 与Georgia 并不完全匹配,但⾄少⾜够接近。
因此,我们建议在所有 font-family 规则中都提供⼀个通⽤字体系列。这样就提供了⼀条后路,在⽤户代理⽆法提供与规则匹配的特定字体时,就可以选择⼀个候选字体。
如果您对字体⾮常熟悉,也可以为给定的元素指定⼀系列类似的字体。要做到这⼀点,需要把这些字体按照优先顺序排列,然后⽤逗号进⾏连接:
p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', rif;}
根据这个列表,⽤户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可⽤,就会简单地选择⼀种可⽤的 rif 字体。
使⽤引号
一起学音标
您也许已经注意到了,上⾯的例⼦中使⽤了单引号。只有当字体名中有⼀个或多个空格(⽐如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是,如果把⼀个 font-family 属性放在 HTML 的 style 属性中,则需要使⽤该属性本⾝未使⽤的那种引号:<p >...</p>
字体风格
font-style 属性最常⽤于规定斜体⽂本。
该属性有三个值:
normal - ⽂本正常显⽰
italic - ⽂本斜体显⽰
oblique - ⽂本倾斜显⽰
实例
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
italic 和 oblique 的区别
font-style ⾮常简单:⽤于在 normal ⽂本、italic ⽂本和 oblique ⽂本之间选择。唯⼀有点复杂的是明确 italic ⽂本和 oblique ⽂本之间的差别。
斜体(italic)是⼀种简单的字体风格,对每个字母的结构有⼀些⼩改动,来反映变化的外观。与此不同,倾斜(oblique)⽂本则是正常竖直⽂本的⼀个倾斜版本。
通常情况下,italic 和 oblique ⽂本在 web 浏览器中看上去完全⼀样。
字体变形
font-variant 属性可以设定⼩型⼤写字母。
⼩型⼤写字母不是⼀般的⼤写字母,也不是⼩写字母,这种字母采⽤不同⼤⼩的⼤写字母。
实例
p {font-variant:small-caps;}
字体加粗
font-weight 属性设置⽂本的粗细。
使⽤ bold 关键字可以将⽂本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果⼀个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,⽽ 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置⽐所继承值更粗的⼀个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移⽽不是上移。
实例
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体⼤⼩
成都国际学校排名榜font-size 属性设置⽂本的⼤⼩。renslaer polytechnic institute
有能⼒管理⽂本的⼤⼩在 web 设计领域很重要。但是,您不应当通过调整⽂本⼤⼩使段落看上去像标题,或者使标题看上去像段落。
请始终使⽤正确的 HTML 标题,⽐如使⽤ <h1> - <h6> 来标记标题,使⽤ <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值:
将⽂本设置为指定的⼤⼩
不允许⽤户在所有浏览器中改变⽂本⼤⼩(不利于可⽤性)
绝对⼤⼩在确定了输出的物理尺⼨时很有⽤
相对⼤⼩:orpheus
相对于周围的元素来设置⼤⼩
允许⽤户在浏览器改变⽂本⼤⼩
注意:如果您没有规定字体⼤⼩,普通⽂本(⽐如段落)的默认⼤⼩是 16 像素 (16px=1em)。
使⽤像素来设置字体⼤⼩
通过像素设置⽂本⼤⼩,可以对⽂本⼤⼩进⾏完全控制:
实例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
在 Firefox, Chrome, and Safari 中,可以重新调整以上例⼦的⽂本⼤⼩,但是在 Internet Explorer 中不⾏。
虽然可以通过浏览器的缩放⼯具调整⽂本⼤⼩,但是这实际上是对整个页⾯的调整,⽽不仅限于⽂本。
使⽤ em 来设置字体⼤⼩
如果要避免在 Internet Explorer 中⽆法调整⽂本的问题,许多开发者使⽤ em 单位代替 pixels。
W3C 推荐使⽤ em 尺⼨单位。
1em 等于当前的字体尺⼨。如果⼀个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体⼤⼩时,em 的值会相对于⽗元素的字体⼤⼩改变。
toluene diisocyanate浏览器中默认的⽂本⼤⼩是 16 像素。因此 1em 的默认尺⼨是 16 像素。
可以使⽤下⾯这个公式将像素转换为 em:pixels/16=em
(注:16 等于⽗元素的默认字体⼤⼩,假设⽗元素的 font-size 为 20px,那么公式需改为:pixels/20=em)
实例
h1 {font-size:3.75em;} /* 60px/16=3.75em */h2 {font-size:2.5em;}  /* 40px/16=2.5em */p {font-size:0.875em;} /* 14px/16=0.875em */
在上⾯的例⼦中,以 em 为单位的⽂本⼤⼩与前⼀个例⼦中以像素计的⽂本是相同的。不过,如果使⽤ em 单位,则可以在所有浏览器中调整⽂本⼤⼩。
不幸的是,在 IE 中仍存在问题。在重设⽂本⼤⼩时,会⽐正常的尺⼨更⼤或更⼩。
结合使⽤百分⽐和 EM
在所有浏览器中均有效的⽅案是为 body 元素(⽗元素)以百分⽐设置默认的 font-size 值:
实例
body {font-size:100%;}h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
CSS 字体属性
属性描述
font简写属性。作⽤是把所有针对字体的属性设置在⼀个声明中。雷军英语
font-family设置字体系列。
font-size设置字体的尺⼨。
font-size-adjust当⾸选字体不可⽤时,对替换字体进⾏智能缩放。(CSS2.1 已删除该属性。)polt
font-stretch对字体进⾏⽔平拉伸。(CSS2.1 已删除该属性。)
准备 英文
font-style设置字体风格。
font-variant以⼩型⼤写字体或者正常字体显⽰⽂本。
设置字体的粗细。
font-weight

本文发布于:2023-06-21 04:19:16,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/152165.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

下一篇:复习题
标签:字体   设置   属性   元素
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图