网页设计中最常用的字体

英文字体

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 调用一些其他的字体库，弊端是，用户在访问的时候要去下载这个文件，所以会影响整个网站的效率。

转载于:https://www.cnblogs.com/fxair/p/3495004.html

网页设计中最常用的字体相关推荐

响应式网页设计_响应式网页设计中的常用技术
响应式网页设计在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
ps在html中的应用程序,Photoshop在网页设计中的应用与方法
现在已经进入数字化信息时代,随着网络的飞速发展,人们的生活逐渐迈向了新时代,无法想象,哪天没有了网络会怎样,呵呵,开个玩笑了,网络只会一天比一天精进,所以网络知识的普及是必须的! 1.图像局部截取和图 ...
Photoshop在网页设计中的应用与方法
1.图像局部截取和图像尺寸调整做网页设计时经常要用到的某张图像一部分,这就需要截取图像的局部.图像局部截取的方法很多,但使用Photoshop操作起来更方便.具体操作步骤如下: (1)在Photos ...
网页设计中的默认字体样式详解
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
html艺术字在线制作,HTML网页设计中的字体设计
HTML网页设计中的字体设计字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面: 一.字符集 ...
html网页设计同字,HTML网页设计中的字体设计
HTML网页设计中的字体设计字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面: 一.字符集 ...
分享17个网页设计中字体排版的优秀示例
网页中的字体的使用和排版是一门学问,这篇文章带给大家17个网页设计中字体排版的优秀作品.下面收集的这些网站作品都是精心挑选的优秀国外网站作品,丰富多彩,大胆的相当干净和简单的设计,当然也有一些好的灵感 ...
RP网页设计中的默认字体：{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
网页设计中的默认字体为font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif; 理由如下: font-size采用px, 不采用em. 理由是em带来的 ...
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;网页设计中的默认字体
网页设计中的默认字体为font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif; 理由如下: font-size采用px, 不采用em. 理由是em带来的 ...
html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...

网页设计中最常用的字体

英文字体

网页设计中最常用的字体相关推荐

最新文章

热门文章