网页设计中最常用的7款字体

字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。

衬线字和无衬线字的区别:
网页设计中最常用的7款字体
左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。

衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。

如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。

无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅黑。

线字体容易识别,它强调了每个字母笔画的开始和结束,因此易读性比较高,非线字则比较醒目。

在使用的过程中需要根据网站的定位而选择相应的字体。

下面简单给大家介绍在网站当中常用的8款字体:

1、微软雅黑

web里面最安全的一个字体。字体方正、简洁,被广泛使用。
网页设计中最常用的7款字体
上海大众这个网站默认的首选字体就是微软雅黑,整体比较简洁。

网页设计中最常用的7款字体

2、黑体

黑体字和微软雅黑差不多,作为非线字中的一种,同样具备方正、简洁、醒目的特点。

网页设计中最常用的7款字体

特别适合当标题。其实黑体在使用上没有微软雅黑来得清晰明亮,一般在微软雅黑和黑体的选择下,个人更倾向微软雅黑。

网页设计中最常用的7款字体

佳能的官网默认首选的字体就是黑体,字体简洁醒目。

网页设计中最常用的7款字体

3、宋体

称线字体——中易宋体,简称宋体。笔划有粗细变化,常用于书籍、杂志、报纸印刷的正文排版,所以在大篇幅文章的设计时,可以采用宋体。

大标题显示时字体不是很好看,所以一般不建议用宋体来当标题。

网页设计中最常用的7款字体

上海汉路律师事务所的网站就是采用了宋体字,这种字体的选择一般出现在一些个性比较强的网站中,传统、专业、公正、官方、权威,宋体就表现了这种特点。

网页设计中最常用的7款字体

4、 Arial

Arial字体是微软公司网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读。但是,大写的“I”和小写的“l”是无法区别的,所以一般可以考虑用Tahoma字体来替代。这套字体方正、不花巧、方便阅读和印刷清晰。使用范围特别广泛。

网页设计中最常用的7款字体

但苹果系统下是没有这套字体的,苹果系统默认的是Helvetica。

网页设计中最常用的7款字体

可以看下禅道项目管理软件的英文网站,幻灯片采用的字体就是Arial,可以看下这套字体在幻灯片下粗细的组合形态。

5、Tahoma

Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,是种非常圆滑的字体。这个字体和中文混排显示时,不会出现中英文不对齐的状态。这套字体解决了Arial大写“I”与小写“l”难以分辨的问题。也相当于在Arial上优化了不少。除此,细看这套字体,可以发现其实在一些笔划的处理上还是很精致的。

网页设计中最常用的7款字体

zui前端框架网站,英文字体的设置上也用到了这个字体,虽然不是第一优先选择,但是可以看出Tahoma这套字体的使用率也是很高的。

网页设计中最常用的7款字体

6、Helvetica

Helvetica字体,设计师们的最爱。这套字体属于 Realist风格,拥有简洁现代的线条,受到大部分设计师的追捧。这种字体给人一种简单、现代化、休闲轻松的感觉。适用于扁平化设计,也适合搭配任何设计项目,包括banner、平面设计以及网页字体等。

网页设计中最常用的7款字体

在Mac下面被认为是最佳的网页字体,但在Windows下由于Hinting的原因显示很糟糕。

这个字体主要体现在苹果官网上,可以看下美国的官网。

网页设计中最常用的7款字体

7、Georgia

说到英文的线字,肯定首选是Georgia。

这套字体笔划粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还不错。

此种字体风格优雅又精致,可用于电影海报、游戏、时尚类网页设计中。

网页设计中最常用的7款字体

林肯的官网,Georgia是官网的第二优先选择显示的字体。网站比较现代,在一些幻灯片当中结合了Georgia字体,称线字和非称线字的相结合,可以使得整个网站更生动。
网页设计中最常用的7款字体
在专业的网页设计里,除了Banner图、广告语等特殊情况可能会用到特殊字体,网页中使用的字体以不超过2种为准,并且最好采用标准字体,比如中文的宋体、微软雅黑,英文的Arial、Helvetica。

使用这些系统自带的字体,能让前端开发人员在排版时高程度地还原设计稿的文字效果。

倘若使用了特殊字体,在设计font-family的时候,应该多设置几种字体的优先顺序,以确保网页显示的最佳效果。

当然,我们一般情况下建议使用系统自带的字体。

以上7种网站中常用的字体介绍和示例,希望可以对大家有所帮助。

本文转载自,原文链接: ,本文观点不代表125jz立场。

(3)
江山如画的头像江山如画管理团队
上一篇 2019年10月21日 下午6:55
下一篇 2019年10月22日 下午1:02

99%的人还看了以下文章

  • 新手必看:如何制作网页

    网上学习如何制作网页的教程很多,但是都很杂乱,没有一个体系。这篇文章,是给大家梳理一下制作网页所需要学习的内容,新手可以按照这个流程,一步一步的学习,当然,如果你一直看下去,我们会有惊喜给大家。

    2019年10月8日
    4.2K0
  • 个人如何制作网站、建立站点

    个人如何制作网站应该从以下几个方面展开: 1、确定网站的题材 网站题材就是网站的主题,你的网站是干什么的。如电影网站、小说网站等。 首先要明确,选择自己擅长和喜爱的题材,其次切忌题材太滥或者目标太高。 2、确定题材后,就要将收集到的资料内容作一个合理的编排 比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,…

    2019年11月16日
    13.1K0
  • 浏览器播放mp4格式视频时只有声音看不到画面的原因及解决方法(精)

    做HTML5网页,要播放视频,视频格式为mp4,结果浏览器只能听到声音,看不到画面。 反复测试,多个浏览器均出现此问题。刚开始以为视频的格式不对,我是从MOV转的MP4格式,反复确认嵌入的视频确实是mp4格式的,可是试了好多次结果都一样,只有声音不显示图像,搞了一天,直接搞懵了。 在网上到处搜索,最终解决。 问题描述: 在html5页面中嵌入视频,用浏览器打…

    2018年5月9日
    21.2K0
  • 平面设计中最常用的一项设计技法-K先生案例精讲

    对比是在平面设计中最常用的一项设计技法,几乎每一个作品中都会出现“对比”的痕迹,今天中国网页设计给大家分享的是K先生平面设计中对比的8种运用技巧,包括大小、色彩、肌理、前后、疏密、虚实…等等,每个技巧运行都配有设计案例,一步步教你如何分析设计,讲解到位,通俗易懂,实用性强,一定会对你的设计有所帮助。

    2020年4月26日
    20.6K0
  • 赞!UI设计师必须学习的3个色彩理论

    彩搭配在设计中很重要!不同的配色方案呈现出不同的效果,搞定配色!请学习最好的配色教程 色彩模式  1、RGB色彩模式。通过光的三原色相加混合产生的。显示器的所有色彩都是通过红色、绿色、蓝色这三原色混合来显示的。 2、CMYK 色彩模式。是指墨水或颜料的三原色加上黑色这四种颜色,混合后出现的色彩。CMYK是打印机等印刷设备使用的色彩模型。 3、索引色…

    2022年8月10日 网页设计
    3.5K0
  • 从零开始做APP界面设计二:App界面设计尺寸

    Android SDK模拟机的尺寸 屏幕大小 低密度(120) 中等密度(160) 高密度(240) 超高密度(320) 小屏幕 QVGA(240×320) 480×640 普通屏幕 WQVGA400(240×400) WQVGA432(240×432) HVGA(320×480) WVGA800(480×800) WVGA854(480×854) 600×…

    2018年4月21日 网页设计
    7.6K0

发表回复

登录后才能评论