2024.01.09

网站字体应用的一些基础认知

在界面设计中经常要处理文字,会面对大量的字体对象。网页中的字体是如何显示的?这个问题和 CSS 中的 font-family 有着紧密的关系。当我们拿到设计稿去实现一个网页时,经常会发现设计稿当中一般使用的字体都是 PingFang SC 这一款字体。这是因为我们的 UI 设计师 一般使用的都是 Mac 电脑制作的设计稿。但是我们并不能傻乎乎的就按照设计稿直接设置 font-family:PingFang SC; 这样的代码。

一般我们都会为 body 标签,指定 font-family 属性,为整个网页设置统一的字体,而且尽可能的使用各个系统下的默认字体。font-family 是前端的一个 CSS 属性,用来定义字体名称,控制网页用什么字体显示。它会根据所填的字体名称查找用户电脑是否有对应的字体,进而让字体显示在网页中。由于 Windows 电脑默认是没有苹方的,所以我们的苹方字体设计稿在 Windows 中就显示微软雅黑。看着简单的文字,其实还可以拆分为更细化的属性,比如字体、大小、颜色、字重、行高、对齐方式等等。在设计师常用的 Photoshop、Sketch 设计软件中都有对应的设置。基本上,所有的网页都需要定义 font-family。为了保持同一个网页在不同平台环境的兼容性,需要写不止一个字体。font-family 也是可以根据不同网站风格和需求设置不同的字体。那么这里就拿个结构更简单、理解更容易的例子来说明。比如一个比较标准的 font-family 例子,不同字体用英文逗号隔开,含有空格的要加英文双引号。调用规则是:如果浏览器不支持第一个字体,则会尝试下一个,以此类推。由于英文字体中大多不包含中文,需要先对英文字体声明,这样不会影响到中文字体的选择。所以优先使用效果最好的英文字体,中文字体声明则紧随其次。为了让 Mac 系统使用到显示效果最好的字体,优先声明 Mac 系统字体。Win 系统默认没有安装 Mac 系统字体,因此会延后调用 Arial 和微软雅黑。

字体两种最基础:有衬线字体 serif 和无衬线字体 sans-serif。其中衬线指的是字母结构笔画之外的装饰性笔画,比如宋体就是典型的有衬线字体,常用于印刷。而在互联网时代,用的最多的是无衬线字体,比如微软雅黑。所以在 UI 设计中,主要界面框架基本使用的就是无衬线字体。一段 font-family 代码,最后一个 sans-serif  就表示无衬线字体。关于通用字体族名,有5种:serif 衬线字体族;sans-serif 非衬线字体族;monospace 等宽字体,即字体中每个字宽度相同;cursive 草书字体;fantasy 主要是那些具有特殊艺术效果的字体。中文字体界,两个有代表性的分类——宋体和黑体,分别对应着衬线字体和无衬线字体。选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装,为了保证 MAC 用户的体验,在定义中文字体的时候,先定义 MAC 用户的中文字体,再定义 Windows 用户的中文字体。

所以,为什么 Windows 显示微软雅黑,Mac 显示苹方,归根到底还是在于系统中有没有安装对应的字体。兼顾中西,西文在前,中文在后。Font-family 设置的目的就是让不同的系统在面对错综复杂的字体环境时,能够选择出适合自己显示效果最好的字体,以此提高网页界面的视觉兼容性,提升用户体验。

如有任何网站建设需求

KINGTIN·经天网络 欢迎您的垂询

More Related Articles

电子特气,作为晶圆制造中的核心材料,占据原材料成本的15%,广泛应用于清洗、蚀刻、成膜、掺杂等过程,是晶圆制造过程中不可或缺的耗材。随着全球及中国集成电路行业的蓬勃发展,电子特气的需求也将持续增长。

要提升网站内页的权重,首先要将主要精力集中于内页的优化上。这包括在网站内部的不同页面间添加合适的链接,构建内部链接网络,以帮助搜索引擎爬虫更深入地抓取和收录页面,同时也传递权重。这种内部链接的优化对···

随着国内消费水平的持续提高和消费者健康意识的日益增强,防晒已不再是简单的防止晒黑,而是进阶到防止紫外线造成的皮肤老化。如今,中国消费者对防晒产品的需求变得更为细化和多元化,深知紫外线是皮肤外源性老化···

机械设备行业涵盖广泛,包括专用设备制造业、通用设备制造业、运输设备制造业、仪器仪表制造业等。专用设备种类繁多,如工程机械、冶金矿采化工设备、环保设备、光伏设备、锂电设备、3C设备、半导体设备、印刷包装···

随着零部件收入增速超过乘用车销量增速,行业回暖态势明显,带动了板块需求的增长。同时,乘用车出口加速,零部件海外业务也进入了新的发展阶段。中国车企凭借新能源与智能化技术,成功在欧美市场取得突破,并提升···

在寻求国内高端网站设计制作公司之前,对建站流程的了解是不可或缺的。建站并非简单地将网页堆砌,而是一个精心策划的过程。在此过程中,你需要清晰界定网站的目的、目标受众以及期望达成的效果。高端网站以其独特···

View View