网页设计中常用的8款字体

了解一些在网页设计中常用的字体

来源于:

https://www.ui.cn/detail/250355.html

字体在网站中扮演了相对重要的一个角色,所以在网站中,选用什么样的字体也是一个相对比较重要的工作。今天跟大家分享下在网站当中常用的8款字体。

都知道,字体主要分为称线字和无称线字。其实细分的话还有等宽字体、梦幻字体和花体字。但今天我们主要针对常用的称线字和非称线字来讲。

称线字和非称线字的区别可以看下图:

网页设计中常用的8款字体

可以看到左边的中文和英文字属于称线字,右边中文和英文属于非称线字。称线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。比如我们常用的宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。非称线字也叫无称线字,无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅黑。

称线字体容易识别,它强调了每个字母笔画的开始和结束,因此易读性比较高,非称线字则比较醒目。所以,在使用的过程中需要根据网站的定位而选择相应的字体。

下面简单给大家介绍网页中常用的几种字体:

1、微软雅黑

Vista之后新引入的字体,这个字体的使用率不用说了,可以说是web里面最安全的一个字体。字体方正、简洁,被广泛使用。

网页设计中常用的8款字体

2、黑体

黑体字和微软雅黑差不多,作为非称线字中的一种,一样具备方正、简洁、醒目的特点。这样的字体特别适合当标题。其实黑体在使用上没有微软雅黑来得清晰明亮,一般在微软雅黑和黑体的选择下,个人更倾向微软雅黑。

网页设计中常用的8款字体

3、华文细黑

华文细黑是Mac下的默认中文,这套字体跟前面的微软雅黑相比较,更显绢细、秀气。笔划细节比微软雅黑处理的多一些,所以整体给人比较精致的感觉。注意一下,华文细黑并不是所有电脑的自带字体,当网站文字用到这个字体的时候,是需要在自己电脑上下载这套字体的。除此,在写css代码的时候,font-family应该设置的选择性多一下,以保证界面打开的最佳效果。

网页设计中常用的8款字体

这个字体就不给大家做展示效果了,因为这个不是系统的默认字体,电脑上没有安装这个字体的也看不到网页的原始效果。

4、中易宋体

前面介绍的三款字体都是非称线字,接着要介绍的是称线字体——中易宋体,简称宋体。宋体在我们的日常中使用范围也很广,这是电脑自带的其中一种字体。宋体是为适应印刷术而出现的一种汉字字体。笔划有粗细变化,常用于书籍、杂志、报纸印刷的正文排版,所以在大篇幅文章的设计时,可以采用宋体。这个字体是Windows系统下最常见的字体,小字体点阵,大字体TrueType。大标题显示时字体不是很好看,所以一般不建议用宋体来当标题。

网页设计中常用的8款字体

5、 Arial

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

网页设计中常用的8款字体

6、Tahoma

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

网页设计中常用的8款字体

7、Helvetica

说到Helvetica这套字体,应该是设计师们的最爱了吧。这套字体属于 Realist风格,拥有简洁现代的线条,受到大部分设计师的追捧。这种字体给人一种简单、现代化、休闲轻松的感觉。适用于扁平化设计,也适合搭配任何设计项目,包括banner、平面设计以及网页字体等。在Mac下面被认为是最佳的网页字体,但在Windows下由于Hinting的原因显示很糟糕。

网页设计中常用的8款字体

8、Georgia

说到英文的称线字,肯定首选是Georgia。这套字体笔划粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还不错。此种字体风格优雅又精致,可用于电影海报、游戏、时尚类网页设计中。

网页设计中常用的8款字体

在专业的网页设计里,除了Banner图、广告语等特殊情况可能会用到特殊字体,网页中使用的字体以不超过2种为准,并且最好采用标准字体,比如中文的宋体、微软雅黑,英文的Arial、Helvetica。只有使用这些系统自带的字体,才能让前端开发人员在排版时高程度地还原设计稿的文字效果。倘若使用了特殊字体,在设计font-family的时候,应该多设置几种字体的优先顺序,以确保网页显示的最佳效果。当然,我们一般情况下建议使用系统自带的字体。

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


常用网页字体

来源于:

http://www.runoob.com/w3cnote/web-font-family.html

本文我们将为大家介绍常见的网页字体,包括中文及英文:

英文

Sans-serif

  • Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
  • Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常
  • Lucida Family: Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。
  • Verdana: 专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。
  • Tahoma: 也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。
  • Trebuchet MS: 为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。

Serif

  • Georgia: 基本上适合正文屏显的衬线字体,非Georgia莫属了。笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还算OK。
  • Times: Times是为了报纸而设计的,特点是可以在有限的空间塞进去更多的文字,笔画较弱,小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文,被骂得很惨之后换成了Georgia。

中文

  • 中易宋体:Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
  • 微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。
  • 华文细黑:Mac下的默认中文。
  • Droid Sans和衍生的WenQuanYi Microhei:Andriod中的中文,也是Linux绝大多数发行版本的默认中文,,当然也有用WenQuanyi Zenhei的,不过比较少了。

注意:CSS3开始支持Embedded font所以英文字体选择一下子多了很多,而中文字体由于文件庞大,仍然就是那几个选。

网页字体效果

网页字体效果预览

提取码:无
解压码:无

随记

中文文案排版指北

2019-3-29 14:50:42

随记

柒比贰 - 主题美化汇总

2019-4-9 13:07:22

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索