如何设置 font-family 比较好以及字体的中英文名

如何设置 font-family 比较好？

如果设置为font-family: Arial, "微软雅黑","宋体"; 是不是英文都会使用Arial字体，而中文则视乎你的系统有没有雅黑，有则用雅黑，无则用宋体？

针对常见的中文英文和日文，如果所有的浏览器都能够正确处理中文的话， 理论上的最简单的设置应该是：

font-family: sans-serif。

这行代码设置所有字体为系统默认的无称线字体。如果在各种操作系统和浏览器都做对的情况下，它应该对中英文使用默认的无称线字体。即大多数情况下英文显示『Arial』或『Helvatica』，中文显示『黑体』或『微软雅黑』，日文显示『哥特体』。当然，也可以设置font-family: serif。那么相应的就是『Times』、『宋体』和『明朝』。

很可惜这项设置只能在Mac和Windows8下正确显示。在其它Windows下其实是无效的。原因如下：

• 除了Win8以外的Windows都会错误地使用宋体（称线字体）显示。（其实也没问题，只是那些想用雅黑显示的网页就没戏了）
• Windows XP及以前的操作系统上黑体显示的中文字非常难看不便阅读。

----------------------分析开始之前----------------------

为了使问题简化，在此就讨论的条件和范围说明一下：

注1：貌似某些新版本的浏览器能够在Windows上正确分辨中文的称线和无称线字体了。
注2：Win8上的IE10似乎已经修正了对无称线字体的显示问题。但是不知道Win7的IE10会怎样。
注3：不讨论Windows和Mac以外的操作系统了。
注4：不讨论一个网页内标题和正文使用不同中文字体的情况。
注5：不讨论中文、日文和拉丁字母以外的字符。
注6：不讨论用户在浏览器的设置中中强行设置字体的情况。
注7：不讨论称线和无称线字体以外的情况，如等宽字体。（因为对中文实际使无效的）

----------------------分析开始----------------------

在给出答案前，先说各种字体的在各种操作系统上现象：

宋体：

• 在Windows操作系统上显示良好。但是仅限于12像素和14像素。超出14像素的字基本就会出现字不够方正，锯齿明显的现象。
• 在Mac上各种字号都可以很好的显示。这是因为Mac上针对字体所做的反锯齿效果做的比较好。

黑体或微软雅黑：

黑体和微软雅黑都属于无称线字体。

• Windows Vista，Windows 7和Windows 8上在各种字号下显示良好。但是仅就阅读来售，雅黑在Windows下不大适合做大段阅读，因为会出现明显的字体歪歪扭扭的现象。雅黑比较适合做UI字体，比如按钮、导航、菜单。大号字体下用以显示标题也不错。因此我们看到很多新网站都开始使用雅黑了。
• Mac：黑体没有任何问题。虽然有些人号称看苹果上的黑体字很不习惯。但是个人觉得还是最适合阅读的字体。而且也适合做UI字体。
• Windows XP及以前的Windows：这里就比较复杂了。因为：
  1) Windows XP原生是不带微软雅黑的。
  2) 加装Office 2007后会加装微软雅黑。
  3) Windows XP的Clear Type做的非常不好，导致雅黑在Windows XP上的显示效果基本无法阅读。

为了发挥雅黑的好处，同时解决兼容性问题，我在服务器端针对各种不同的操作系统做了不同的判断。如下：

• Windows XP及以前版本的Windows
  

  font-family: Arial, 宋体, sans-serif;
  

• Windows Vista和Windows 7
  

  font-family: 'Microsoft Yahei', sans-serif;
  

  Sorry，英文就无法设置字体了，因为中文字体都包含了英文字体。好在雅黑显示英文还凑合。
  
  
• Mac及其它操作系统
  

  font-family: sans-serif;
  

其实这还不够好，因为在Windows下，正文使用宋体显示比较合适。我的下一步的计划是：

1. 针对Windows下的正文使用宋体。
2. 针对雅黑字体，用13px和15px等奇数字体显示，因为效果更好。

 

CSS 定义了 5 种通用字体系列

• Serif 字体
• Sans-serif 字体
• Monospace 字体
• Cursive 字体
• Fantasy 字体

Serif 字体

这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。

Sans-serif 字体

这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。

Monospace 字体s

Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相 同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。

Cursive 字体

这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。

Fantasy 字体

这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

理论上讲，用户安装的任何字体系列都会落入到上述某种通用系列中，但实际上可能并非如此，不过例外情况（如果有的话）往往很少。s

-----------以上引自W3School

 

西方国家字母体系分为两类：serif以及sans serif。 　　

serif是有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，sans serif就没有这些额外的装饰，而且笔画的粗细差不多。 　　

serif字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高，sans serif则比较醒目。在走文阅读的情况下，适合适用serif字体进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。 　　

sans serif强调每一个字母，serif更强调于一个单词。 　　

中文字体中的宋体就是一种最标准的serif字体，衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比，在远处观看的时候横线就被弱化，导致识别性的下降 。

----------以上引自百度百科

sans serif（非衬线字体）更适合于作为标题，强调，

serif（衬线字体）更适合于正文。

------------

具体哪些字体是sans serif（非衬线字体），哪些字体是serif（衬线字体），在dreamweaver的CSS提示框中可以查到，其他的上网搜索。

------------

引自QQ.com的CSS如下

body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"宋体","Arial Narrow",HELVETICA;background:#fff;}

不难看出，字体大小：12像素，行高22像素，字体：宋体，Arial，Narrow，helvetica

 

引自taobao.com的CSS如下

body{font:12px/1.5 tahoma,arial,\5b8b\4f53;}

这段CSS的意思为：字体大小：12像素，行高1.5倍，即150%，1.5*12=18像素，字体：tahoma,arial,\5b8b\4f53，这里的\5b8b\4f53是汉字"宋体"的Unicode编码，不采用 SimSun的原因是 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。

 

字体英文，unicode对照表

平台	中文名	英文名	Unicode	Unicode 2
Windows	新细明体	PMingLiU	\65B0\7EC6\660E\4F53	新细明体
细明体	MingLiU	\7EC6\660E\4F53	细明体
标楷体	DFKai-SB	\6807\6977\4F53	标楷体
黑体	SimHei	\9ED1\4F53	黑体
宋体	SimSun	\5B8B\4F53	宋体
新宋体	NSimSun	\65B0\5B8B\4F53	新宋体
仿宋	FangSong	\4EFF\5B8B	仿宋
楷体	KaiTi	\6977\4F53	楷体
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312	仿宋_GB2312;
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312	楷体_GB2312;
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53	微软正黑体
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1	微软雅黑
Mac OS	华文细黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1	华文细黑
华文黑体	STHeiti	\534E\6587\9ED1\4F53	华文黑体
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
丽黑 Pro	Pro LiHei Pro Medium	\534E\6587\7EC6\9ED1 Pro	丽黑Pro
丽宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro	丽宋 Pro
标楷体	BiauKai	\6807\6977\4F53	标楷体
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1	苹果丽中黑
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B	苹果丽细宋
Office	隶书	LiSu	\96B6\4E66	隶书
幼圆	YouYuan	\5E7C\5706	幼圆
华文细黑	STXihei	\534E\6587\7EC6\9ED1	华文细黑

转载于:https://my.oschina.net/u/3147332/blog/807061