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

建材五金作为传统行业,在信息技术的发展下也需要适应网络化的发展趋势。建材五金网站的建设是非常必要和合理的,可以帮助企业展示产品优势,吸引更多客户,提高销售额。

在建材五金网站的主页上展示主要品···

建材再生是建筑行业可持续发展的重要话题,随着全球对可持续发展的呼吁不断增强,建筑行业也在寻求创新的解决方案来减少资源消耗和环境污染。建材再生的核心理念是将废弃建材重新加工利用,从而减少对原生资源的需···

中国再生有色金属行业展现出了新型的发展势头。随着全球对可持续发展的关注不断增加,再生有色金属作为资源利用高效、环保的替代品,受到了更多关注和推动。政府政策的支持和产业技术的不断创新,为再生有色金属行···

关于航空航天行业网站,一般都是以蓝色系为主,科技感也比较十足,访问者刚进来网站首页,机会眼前一亮,一种充满航空航天的感觉,就像蓝天白云一样,没有那么疲惫的感觉。我们要考虑网站的栏目和板块,把航空航天···

随着半导体行业的不断发展,半导体行业的网站建设需求量也会比较大的,那么半导体网站怎么做呢?

对于用户来说,半导体行业的型号是很多的,除了根据对应的产品目录来找到对应的型号,对用户来说,直接搜索···

我国的制造业企业拥有较大的体量和完善的产业体系,这使得我国在全球制造业竞争中具有明显的优势,为经济发展奠定了坚实基础。当前,我国正从“中国制造”向“中国智造”转型,人工智能、物联网、大数据等新技术与···

View View