您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

常用网页字体

时间：02-14来源：作者：点击数：

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

英文

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所以英文字体选择一下子多了很多，而中文字体由于文件庞大，仍然就是那几个选。

网页字体效果

Georgia: ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Impact: ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana: ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS: ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
微软雅黑: 24px 微软雅黑中文字体 加粗中文字体 ©一方天
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
20px 微软雅黑中文字体 加粗中文字体 ©一方天
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
宋体: 26px 宋体中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px 宋体中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
黑体 * 慎用加粗: 26px 黑体中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px 黑体中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789

英文非等宽字体

Arial: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Comic Sans MS: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 10px
abcdefghijklmnopqrstuvwxyz 0123456789
Georgia: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Tahoma: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Time News Roman: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789

英文等宽字体

Courier New: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Hei: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Monaco: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
simhei: ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789

中文字体

宋体: 14px 宋体中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px 宋体中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
微软雅黑: 14px 微软雅黑中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px 微软雅黑中文字体 加粗中文字体
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
MingLiU 11px 中文字: 11px清晰中文字体 加粗中文字体 (11px)
PMingLiU 11px 中文字: 11px清晰中文字体 加粗中文字体 (11px)
常见11px使用范例：Tahoma,Verdana,Arial,PMingLiu,MingLiu: 11px清晰中文字体 加粗中文字体 (11px)
MS UI Gothic 10px 中文字: 據說這種字體繁體中文會顯示得稍微好一點，但都看不怎麽清楚(10px)

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:使用 HTML5 Canvas 制作时钟下一篇:前端技能汇总

Calibre – 一站式电	新手火腿必看！超详细的
图解 \| 原来这就是TCP	图解 \| 原来这就是网