第4课:字体

这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解:

字体族[font-family]

CSS属性font-family的作用是设置一组按优先级排序的字体列表,如果该列表中的第一个字体未在访问者计算机上安装,那么就尝试列表中的下一个字体,依此类推,直到列表中的某个字体是已安装的。

有两种类型的名称可用于分类字体:字体族名称(family-name)和族类名称(generic family)。下面来解释这两个术语。

字体族名称(family-name)
字体族名称(就是我们通常所说的“字体”)的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。
族类(generic family)
一个族类是一组具有统一外观的字体族。sans-serif就是一例,它代表一组没有“脚”的字体。

下面我们通过三个族类的例子来进行解释:

三个族类及其字体族的例子

你在给出字体列表时,自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类(generic family),这样,当没有一个指定字体可用时,页面至少可以采用一个相同族类的字体来显示。

下面是一个按优先级排列的字体列表的例子:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial,那么就使用Verdana字体。假如Verdana字体也没安装的话,那么将采用一个属于sans-serif族类的字体来显示这个h1标题。

注意我们为“Times New Roman”采用的写法:因为其中包含空格,所以我们用引号将它括起来。

字体样式[font-style]

CSS属性font-style定义所选字体的显示样式:normal(正常)、italic(斜体)或oblique(倾斜)。在下例中,所有h2标题都将显示为斜体。

h1 {
 font-family: arial, verdana, sans-serif;
}

h2 {
 font-family: "Times New Roman", serif;
 font-style: italic;
}

字体变化[font-variant]

CSS属性font-variant的值可以是:normal(正常)或small-caps(小体大写字母)。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白?我们来看几个例子:

四个小体大写字母的例子

如果font-variant属性被设置为small-caps,而没有可用的支持小体大写字母的字体,那么浏览器多半会将文字显示为正常尺寸(而不是小尺寸)的大写字母。

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

字体粗细[font-weight]

CSS属性font-weight指定字体显示的浓淡程度。其值可以是normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位)来衡量字体的浓淡。

p {
 font-family: arial, verdana, sans-serif;
}

td {
 font-family: arial, verdana, sans-serif;
 font-weight: bold;
}

字体大小[font-size]

字体的大小用CSS属性font-size来设置。

字体大小可通过多种不同单位(比如像素或百分比等)来设置。在本教程中,我们将关注于最常用和最合适的单位。比如:

h1 {
 font-size:30px;
}

h2 {
 font-size:12pt;
}

h3 {
 font-size:120%;
}

p {
 font-size:1em;
}

上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小,而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者,或者他所使用的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性(accessibility),你应采用像‘%’或‘em’这种允许用户调节字体显示大小的单位。

缩写[font]

CSS属性font是上述各有关字体的CSS属性的缩写用法。

比如说下面四行应用于p元素的代码:

p {
    font-style: italic;font-weight: bold;font-size: 30px;font-family: arial, sans-serif;
}

如果用font属性的话,上述四行代码可简化为:

p {
     font: italic bold 30px arial, sans-serif;
}

font属性的值应按以下次序书写:

font-style | font-variant | font-weight | font-size | font-family

小结

在这一课,你学习了有关字体设置的用法。记住:CSS的一个主要优势就是可以在任何时候设置字体,你花几分钟就可以改变整个网站的字体。CSS节省时间,而且把事情简化。在第5课:文本,我们将学习文本(text)。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4962.html

(2)
江山如画的头像江山如画管理团队
上一篇 2020年2月22日 下午4:23
下一篇 2020年2月22日 下午4:46

99%的人还看了以下文章

  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.9K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    5.5K0
  • Dedecms的tplcache文件夹是什么,可以删除吗?

    tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件,而且会越来越大。dede模板缓存可以加快网页文件的生成速度,关闭的话,理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。

    2023年3月19日
    1.5K0
  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    5.3K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    10.2K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    1.4K0

发表回复

登录后才能评论