字体在网页设计中扮演了相对重要的一个角色，所以在网站中，选用什么样的字体也是一个相对比较重要的工作，今天跟大家分享下在网站当中好看的多款字体。
1、微软雅黑
Vista之后新引入的字体，这个字体的使用率不用说了，可以说是web里面最安全的一个字体。字体方正、简洁，被广泛使用。
2、黑体
黑体字和微软雅黑差不多，作为非称线字中的一种，一样具备方正、简洁、醒目的特点。这样的字体特别适合当标题。其实黑体在使用上没有微软雅黑来得清晰明亮，一般在微软雅黑和黑体的选择下，个人更倾向微软雅黑。
3、华文细黑
华文细黑是Mac下的默认中文，这套字体跟前面的微软雅黑相比较，更显绢细、秀气。笔划细节比微软雅黑处理的多一些，所以整体给人比较精致的感觉。注意一下，华文细黑并不是所有电脑的自带字体，当网站文字用到这个字体的时候，是需要在自己电脑上下载这套字体的。除此，在写css代码的时候，font-family应该设置的选择性多一下，以保证界面打开的最佳效果。
4、中易宋体
前面介绍的三款字体都是非称线字，接着要介绍的是称线字体——中易宋体，简称宋体。宋体在我们的日常中使用范围也很广，这是电脑自带的其中一种字体。宋体是为适应印刷术而出现的一种汉字字体。笔划有粗细变化，常用于书籍、杂志、报纸印刷的正文排版，所以在大篇幅文章的设计时，可以采用宋体。这个字体是Windows系统下最常见的字体，小字体点阵，大字体TrueType。大标题显示时字体不是很好看，所以一般不建议用宋体来当标题。
5、Arial
说到Arial，这套字体是微软公司网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，所以一般可以考虑用Tahoma字体来替代。这套字体方正、不花巧、方便阅读和印刷清晰。使用范围也是特别的广泛。但是要知道的是，苹果系统下是没有这套字体的，苹果系统下默认的是Helvetica。
6、Tahoma
ahoma是英文Windows操作系统的默认字体，这个字体比较均衡，是种非常圆滑的字体。这个字体和中文混排显示时，不会出现中英文不对齐的状态。这套字体解决了Arial大写“I”与小写“l”难以分辨的问题。也相当于在Arial上优化了不少。除此，细看这套字体，可以发现其实在一些笔划的处理上还是很精致的。
7、Helvetica
说到Helvetica这套字体，应该是设计师们的最爱了吧。这套字体属于 Realist风格，拥有简洁现代的线条，受到大部分设计师的追捧。这种字体给人一种简单、现代化、休闲轻松的感觉。适用于扁平化设计，也适合搭配任何设计项目，包括banner、平面设计以及网页字体等。在Mac下面被认为是最佳的网页字体，但在Windows下由于Hinting的原因显示很糟糕。
8、Georgia
说到英文的称线字，肯定首选是Georgia。这套字体笔划粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还不错。此种字体风格优雅又精致，可用于电影海报、游戏、时尚类网页设计中。
在专业的网页设计里，除了Banner图、广告语等特殊情况可能会用到特殊字体，网页中使用的字体以不超过2种为准，并且最好采用标准字体，比如中文的宋体、微软雅黑，英文的Arial、Helvetica。只有使用这些系统自带的字体，才能让前端开发人员在排版时高程度地还原设计稿的文字效果。倘若使用了特殊字体，在设计font-family的时候，应该多设置几种字体的优先顺序，以确保网页显示的最佳效果。当然，我们一般情况下建议使用系统自带的字体。
网页设计中最常用的字体
英文字体
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风格字体，个人觉得个性太过突出，用得不好会不搭。
Verdana，是一套无衬线字体，由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现，因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。
Serif
Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。
有些偏艺术类的网站的大字会使用lobster。更艺术的网站就搜索free font，或者font freebie吧，出现的名字格式为“X种免费网页设计字体”的博客文章，都进去看一眼，挑一个就好。
Trebuchet、Georgia、Times New Roman、Arial、Lucida等字体在26px或更大像素时效果是比较好的，非常适合作为正文的标题。
中文字体
中易宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
Droid Sans和衍生的WenQuanYi Microhei：Andriod中的中文，也是Linux绝大多数发行版本的默认中文，，当然也有用WenQuanyi Zenhei的，不过比较少了。
如果是中文字体，设计的时候最好使用微软雅黑。微软雅黑配上h3比较好看。
因为前端工程师在实现网站的时候，能够使用的中文字体局限于一下几种：
宋体、微软雅黑、Lucida Grande(苹果官方网站使用的中文字体)。
为什么?
电脑系统有自带的字体，PS 有自带的字体，浏览器也有自带的字体。然而浏览器自带的字体很有限。这又是为什么?英文字体，26个英文字母+数字+符号就可以了 。然而中文汉字的数量是非常庞大的。导致文件的体积也很大。
另外前端可以使用 @font-face 调用一些其他的字体库，弊端是，用户在访问的时候要去下载这个文件，所以会影响整个网站的效率。
网页设计中常用的字体有哪些
通常内容应用的字体，font-family：宋体，微软雅黑，Arial，Verdana，arial，serif。通常标题应用的字体，font-family：font-family：宋体，微软雅黑，Arial，只是字号的大小不一样。通常的字体大小，font-size：12px或14px。让网页显示微软雅黑效果通常这样写CSS代码font-family：微软雅黑，宋体。
font-family：宋体，微软雅黑，Arial，Verdana，arial，serif;
font-family： 微软雅黑， 'Microsoft Yahei'， 'Hiragino Sans GB'， tahoma， arial， 宋体;
font-family： "Helvetica Neue"，Helvetica，"Hiragino Sans GB"，"Microsoft YaHei"，Arial，sans-serif;
font-family： "Segoe UI"， Helvetica， Arial， sans-serif;
font-family： Arial，"Hiragino Sans GB"， "Microsoft YaHei"，Helvetica，tahoma，sans-serif;
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。
网页设计中如何让字体和图片搭配得更加好看
01尽量少的字体
使用超过3种不同的字体会使网站看起来结构松散并且不专业。请记住，太多的字体大小和样式同时也会破坏网页的布局。为了防止这种情况，我们需要尽量把使用字体的数量限制到最小。
02标准字体
字体嵌入服务有很多有趣的字体，这些字体可以给你的设计带来全新的、新鲜的和意想不到的东西。它们也非常容易使用。确保字体之间要根据字符宽度互补。记住，好的字体设计会把读者吸引到内容上，而不是字体本身。
03一行字的长度
一行中字符的数量是文本可读性的关键。不应该光由你的设计决定了文本的宽度，也应该考虑到文本的易读性。在网页设计中，你可以通过使用em或像素来限制文本块的宽度，来找到每行的最佳字符数。
04选择一个适用与各种大小的字体
用户用来访问你的站点都是不同大小屏幕和分辨率的设备。这里重要的是要选择一个在不同的尺寸和字重上都能很好地保持可读性和可用性的字体。确保你选择的字体在小屏幕上也是清晰可见的!
05使用字母区分明显的字体
许多字体都把一些字母设计得不容易识别，所以在选择字体时，一定要在不同的环境中试验字体，确保不会给你的用户带来问题。
06全部大写的字母
全部大写的文本——意思是所有的字母都是大写字母——在不涉及阅读的情况下还是不错的，但是当涉及到阅读时，不要强迫你的用户阅读全是大写的文本。全部大写的文本与小写相比，大大降低了浏览和阅读的速度。
07不要把行间距最小化
在字体排版中，我们有一个特殊的术语来表示两行文字之间的间距——leading(或行高)。通过增加行高可以增加文本行之间的垂直空白，从而提高可读性。
08确保有足够的颜色对比度
不要在文本和背景上使用相同或相似的颜色。文本越清晰，用户就能越快地浏览和阅读。一旦你确定了颜色的选择，就需要在设备上和真正的用户之间进行测试，这是非常有必要的。
09不要使用红色或绿色的文字
色盲是一种常见的情况，尤其是在男性中，所以建议使用其他颜色引导重要的信息。避免使用红色和绿色来传达信息，因为红绿色盲是最常见的色盲。
10不要使用闪烁的文字
闪光或闪烁的内容能引发易感人群的癫痫发作。不仅如此，这很可能会让大部分的用户感到厌烦或精神涣散。不要闪烁!
