页面中常用字体 【转】

英文

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)
时间： 2024-11-06 12:16:58

页面中常用字体 【转】的相关文章

HTML中关于字体单位的一些描述

HTML页面中,常用的有px.pt.%.em.rem 我们之前用em.百分比的时候遇到的问题就是计算,而且当嵌套的层级太多时就会非常难以把控,而用px则被固定死了, 现在我们用rem完全不用担心这个问题,因为rem的参照对象只有根节点.我们只需设置根节点的大小,所有子节点都只需参照它来设计就可以, 下面是px.em.百分比和pt的对比. 这里引用一张网络上面的对照图片,方便参照 根据上面的图表(红色部分为默认,当然不同的浏览器渲染默认值不一样,具体还需各位实测)可以看出, 我们只需设置html根

移动web页面使用的字体的思考

前言 记得做PC端页面的时候,字体一般设置为微软雅黑,现在做起移动端页面来了,设计师们一般都还把字体设置为微软雅黑字体,但是做出来后,测试的时候发现页面中的字体不是微软雅黑,怎么办? 后来了解到的手机系统 ios.android 等是不支持微软雅黑字体.为了满足产品的需要,保证视觉稿的还原度,手机端是如何定义微软雅黑字体呢? @font-face的使用 @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot

嵌入在html页面中图像格式的区别与选用

图片格式是计算机存储图片的格式,常见的存储的格式有bmp,jpg,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw等. HTML页面中常用的有:bmp,bmp,jpg,gif. BMP是一种与硬件设备无关的图像文件格式,使用非常广.它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大.BMP文件的图像深度可选lbit.4bit.8bit及24bit.BMP文件存储数据时,图像的扫描

Css中常用中文字体的Unicode编码对照

在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便使用. 宋体 SimSun \5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 新宋体 NSimSun \65B0\5B8B\4F53 新细明体

在前端页面中使用@font-face来显示web自定义字体【转】

本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使

界面设计过程中的常用字体规范

好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事. 这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗……” 这个,好吧,那就直接说说能用的知识:字体字号. 也许你会说:字体字号?也太Low了吧,这个谁不知道重要呀. 对于这个问题,我想说:会和熟练,是两回事.一个App,不同部分的字体字号你能准确地说出来吗? 很多刚做APP界面的设计师,经常会因为字号,字体颜色,间距而困扰. 拿到设计需求后,开始进行设计,不知道从何去调整界面

.net中常用的几种页面间传递参数的方法

转自:http://www.cnblogs.com/lxshanye/archive/2013/04/11/3014207.html 参考:http://www.cnblogs.com/zhangkai2237/archive/2012/05/06/2486462.html 1. 使用QueryString变量    QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或

在jsp中常用的内置对象（5个）小总结和两种页面跳转方式（服务器端调转、客户端跳转）的区别

jsp中常用的几个内置对象: 一.request对象 主要作用:  (1)获取请求页面的信息   比如:request.getParameter("参数名");  (2)获取客户端的信息   比如:request.getRemoteAddr();//获取客户端的IP地址.  (3)处理乱码   比如:request.setCharacterEncoding("UTF-8"); 二.response对象 主要作用:  (1)请求重定向(客户端跳转)  response

iOS开发中常用的轮子 第四篇 收集齐7个轮子，准备高仿部分微博APP页面

产品原因有几张页面会参考微博APP来做,先收集齐轮子:计划这周完成,然后放到github上开源. 1,微博流刷新: 2,浏览微博中的图片: 3,发布微博: 4,发微博时选择照片: ＝＝＝＝＝＝＝＝＝＝＝＝分割线:具体如下 ＝＝＝＝＝＝＝＝＝＝＝＝＝ 选择相册中图片: 1,UzysAssetsPickerController 链接:https://github.com/uzysjung/UzysAssetsPickerController 介绍:用于替换UIImagePickerControlle