网页设计中的系统字体和颜色

网站建设的绝大部分都是关于文档的样式，不过它还提供了很多有用的界面样式工具，而不仅仅面向文档。例如，Mozilla开发人员使用一种名为XUL的语言创建Mozilla浏览器（以及许多Mozilla产品）的界面。XUL就利用CSS和类CSS声明来提供导航按钮、边栏页、对话框、状态框以及chrome本身的其他部分。

类似地，可以重用用户默认环境的某些方面来设置文档的字体和颜色样式，甚至可以对焦点强调和鼠标光标施加影响。CSS2的界面功能会让用户有更愉快的体验，不过如果使用不当，也可能造成用户更混乱。

系统字体和颜色

有时你可能希望在网页设计时自己的文档能尽可能地模仿用户的计算环境。如果你在创建基于Web的应用，目标是让Web组件看上去是用户操作系统中的一部分，这就是一个显而易见的例子。尽管CSS2不允许在自己的文档中重用操作系统外观的任何一个方面，不过有一组丰富的颜色和有限的字体可供选择。

系统字体

假设已经创建了一个元素（例如通过JavaScript实现），其功能相当于按钮。可以让这个控件看上去就像是用户计算环境中的一个按钮，从而满足用户对控件外观的期望，相应地使控件更为有用。为了达到这个目的，只需编写以下规则：

a.widget {font: caption;}

这会为class为widget的所有元素设置字体，使之与有标题控件（如按钮）中的文本使用同样的字体系列、字体大小、字体加粗、字体风格以及字体变形。

CSS2定义了6个系统字体关键字。分别描述如下：

caption

由标题控件使用的字体样式，如按钮和下拉控件。

icon

操作系统图标标签所用的字体样式，如硬盘驱动器。文件夹和文件图标。

menu

下拉菜单和菜单列表中文本使用的字体样式。

message-box

对话框中文本使用的字体样式。

small-caption

由标题小控件的标签使用的字体样式。

status-bar

窗口状态条中文本使用的字体样式。

有一点很重要，要认识到这些值只能用于font属性，它们本身就是简写形式。例如，假设一个用户的操作系统将图标标签显示为10像素的Geneva字体，而且没有加粗、没有斜体，也没有小型大写字母效果。这意味着以下3个规则都是等价的，其结果如下所示：

body {font: icon;}

body {font: 10px Geneva;}

body {

font-weight: normal;

font-style: normal;

font-variant: normal;

font-size: 10px;

font-family: Geneva;

}

因此像icon这样一个简单值实际上包含了很多其他的值。这在网站建设中很特别，所以使用这些值比平常要稍微复杂一些。

举例来说，假设你希望使用图标标签的字体样式，不过还希望将这个字体加粗，尽管用户系统中的图标标签本身可能不是粗体。为此，需要按以下顺序声明规则：

body {font: icon; font-weight: bold;}

如果声明按这个顺序写，第一个声明会让用户代理将body元素的字体设置为与图标标签一致，然后利用第二个声明修改该字体的加粗。如果把顺序倒过来，font声明的值会覆盖以上第二个声明的font-weight值（译注1[1]），这就会丢掉加粗声明。简写属性（如font）也是用类似的方式处理。

你可能想知道，为什么这里没有通用字体系列，因为在设计网页时，通常都建议创作人员指定字体时要采用类似Geneva, sans-serif；的形式（以防用户浏览器不支持所指定的字体）。CSS 不要求“添加”通用字体系列，不过在这种情况下也没有这个必要。如果用户代理想要“抽取”计算环境中显示某种元素所用的字体系列，就绝对能保证这种字体对浏览器一定可用。

如果所需的系统字体样式不可用或者无法确定，用户代理可以在一组近似的字体样式中猜测。例如，可以这样近似small-caption：取caption的字体样式，再缩小字体的大小。如果无法做出这样的猜测，用户代理就应当使用一种“用户代理默认字体”。

网页标题：网页设计中的系统字体和颜色
本文地址：/news37/160087.html

成都网站建设公司_创新互联，为您提供外贸网站建设、ChatGPT、关键词优化、网站设计、搜索引擎优化、Google

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联