个性化阅读
专注于IT技术分析

css字体属性font – CSS教程

点击下载

上一章CSS教程请查看:css背景属性background

CSS字体属性允许你为字体设置各种样式,如字体族、大小和粗体、文本的变体等。

字体属性

CSS为文本内容的样式字体提供了几个属性,比如:font-family, font-style, font-variant, font-weight和font-size,下一节将逐一介绍这些属性。

字体族font-family

font-family CSS属性允许你为选定元素的文本内容设置字体名称和/或通用名称的优先列表。

font-family属性可以容纳多个字体名称作为后备系统。首先列出你想要的字体,然后如果第一个字体不可用,那么可以填充它的任何字体。你应该用一个通用字体家族来结束列表,它有5个serif, sans-serif, monospace,cursive和fantasy。字体族声明可能是这样的:

p {
    font-family: "Times New Roman", Times, serif;
}

注意:如果字体族的名称超过一个单词,它必须用引号括起来,如“Times New Roman”、“Courier New”、“Trebuchet MS”等。

了解更多有关常用字型组合的资料;请查看web安全字体。

字体样式

font-style属性设置元素的文本内容的字体样式。

此属性的可能值为:正常normal、斜体italic或斜体oblique。

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

注意:斜体和斜体初看起来是一样的,但是有区别,斜体样式使用字体的斜体版本,而斜体文本则是普通字体的倾斜版本。

字体大小

font-size属性设置元素的文本内容的字体大小。

有几种方法可以指定字体大小值,例如使用关键字、像素或ems。

使用关键字设置字体大小

通过在body元素上设置关键字字体大小,你可以在页面的其他地方设置相对字体大小,从而使你能够轻松地在整个页面上相应地调整字体大小。使用以下关键字之一指定绝对大小:x-small、x-small、small、medium、large、x-large、x-large。

使用以下关键字之一指定相对大小:smaller和larger。

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

设置字体大小与像素

设置字体大小的像素值(如12px, 16px等)是一个很好的选择,当你需要像素的准确性。但是,不同浏览器的结果可能会有所不同,因为它们使用不同的算法来实现类似的效果。

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

以像素为单位定义字体大小不是很方便,因为用户无法通过浏览器设置更改字体大小。例如,视力有限的用户可能希望将字体大小设置为大于你指定的大小。因此,如果你希望创建一个包容性的设计,应该避免将像素值用于字体大小。

提示:文本可以使用缩放工具在所有浏览器中调整大小。但是,这个特性会调整整个页面的大小,而不仅仅是文本。

使用Em设置字体大小

em单元指的是父元素的字体大小。

em值的大小是动态的。在定义font-size属性时,em等于应用于元素父元素的字体大小。

如果在body元素上设置20px的字体大小,那么1em = 20px, 2em = 40px。

如果你没有在页面的任何地方设置字体大小,那么它就是浏览器的默认值,可能是16px。因此,默认情况下1em = 16px, 2em = 32px。

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

警告:IE6和IE7不可接受地夸大了调整大小的文本的大小。(在发布之前进行测试)。

使用百分比和Em的组合

在所有浏览器中实现类似效果的解决方案是为body元素设置一个默认的字体大小百分比。一种流行的技术是将正文的字体大小设置为62.5%(即默认的16px的62.5%),这等于10px或0.625em。

现在,你可以使用em单元设置任何元素的字体大小,通过将px值除以10进行简单易记的转换。这样,10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em,依此类推。请看下面的例子:

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

提示:万维网联盟(W3C)建议使用em或百分比(%)值来创建更健壮和可伸缩的布局。

字体粗细

字体font-weight属性指定字体的粗细或粗细。

字体样式属性的可能值为:normal、bold、bold、lighter、100、200、300、400、500、600、700、800、900和inherit。

  • 数值100-900指定字体的权重,其中每个数字表示比前一个数字深的一个权重。400表示正常,700表示粗体。
  • 更粗和更轻的值相对于继承的字体权重,而其他值是绝对字体权重。
p {
    font-weight: bold;
}

由于大多数字体只能在有限数量的权重中使用;通常它们只有普通和粗体两种。如果该字体在指定的权重中不可用,则将选择最接近的可用权重。

字体变体

font-variant属性允许文本以特殊的小写变体显示。

小写字母或小大写字母与正常的大写字母略有不同,在正常的大写字母中,小写字母作为对应大写字母的小版本出现。

font-variant属性的可能值是normal、small-caps和inherit。

p {
    font-variant: small-caps;
}
赞(0)
未经允许不得转载:srcmini » css字体属性font – CSS教程

评论 抢沙发

评论前必须登录!