font是怎么使用的
font 的怎么使用?
font 的怎么使用?
2016-11-03
font-family: sans-serif。 这行代码设置所有字体为系统默认的无称线字体。如果在各种操作系统和浏览器都做对的情况下,它应该对中英文使用默认的无称线字体。即大多数情况下英文显示『Arial』或『Helvatica』,中文显示『黑体』或『微软雅黑』,日文显示『哥特体』。当然,也可以设置font-family: serif。那么相应的就是『Times』、『宋体』和『明朝』。
很可惜这项设置只能在Mac和Windows8下正确显示。在其它Windows下其实是无效的。原因如下:除了Win8以外的Windows都会错误地使用宋体(称线字体)显示。(其实也没问题,只是那些想用雅黑显示的网页就没戏了)Windows XP及以前的操作系统上黑体显示的中文字非常难看不便阅读。
----------------------分析开始之前----------------------
为了使问题简化,在此就讨论的条件和范围说明一下:
注1:貌似某些新版本的浏览器能够在Windows上正确分辨中文的称线和无称线字体了。
注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上的显示效果基本无法阅读。(如下面对点点网的截屏)
所以,很多网站所喜欢的 把雅黑设置为第一顺位的做法就出问题了,
font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif; 它会导致:
网站在装了Office 2007+的Windows XP基本属于不可用状态(如上面对点点网的截屏)。装了Office的Mac上显示为雅黑(而不是Mac上显示效果最佳的黑体)。----------------------我的答案----------------------
说是『我的答案』,因为实际上使用 font-family: sans-serif; 已经能解决所有的兼容性问题了。唯一的缺憾是在目前的条件下,无法使用微软雅黑。
为了发挥雅黑的好处,同时解决兼容性问题,我在服务器端针对各种不同的操作系统做了不同的判断。如下: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下,正文使用宋体显示比较合适。我的下一步的计划是:针对Windows下的正文使用宋体。
举报