注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

【转载】网页中的默认中英文字体  

2014-04-13 08:28:05|  分类: 前端小知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;如果你的网站很少使用英文、数字和英文符号,那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

 

默认字体样式:

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;

理由如下:

1.font-size采用px, 不采用em. 理由是em带来的可用性提升很有限,同时基于em很难保证视觉设计的精确性,并且现在主流浏览器都支持“全页面缩放(Full Page Zoom)”功能。 


2.line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高,对于12px字体,这个行高看起来很舒服。 


3.font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。 


4.Tahoma是Matthew Carter为微软公司设计的一款字体,从Mac OS X 10.5开始,默认也捆绑了这款字体。但在Mac OS X 10.4及其之前的系统中,没有Tahoma字体,但有一款看起来比Tahoma更典雅的系统默认字体:Helvetica. 我甚至想把Helvetica放在首位,但考虑到非Mac系统的Helvetica字体都是rip版,以及大部分淘宝用户用的是Windows操作系统,因此只能委屈Helvetica, 放在第二位。 


5.Arial是早期Windows英文系统的默认字体,XP和Vista上都是Tahoma了。Arial几乎在所有操作系统中都有,因此放在最后,作为一道屏障。 


6.最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义,针对这部分用户,sans-serif可能能派上用场。

中英文字体:

font-family: "Times New Roman", "宋体", serif;

实际上呢,上面两种写法都是对的。和很多人想象中的不一样,字体名称外面的引号其实并非必须的。那么加引号和不加引号有什么区别呢?

其实最大的不同在于对字体名称中空白字符(如空格、制表符)的解释。

不加引号的时候,浏览器对于字体名称中空白字符的解释应该和XML中一样,即忽略字体名称左右的空白字符,并且单词中间的空白字符被解释为一个空格。比如 font-family:         Times       New  Roman                , serif; 会被解释成 font-family: Times New Roman, serif;

加引号的时候,浏览器必须保留引号内所有的空白字符。如果写成 font-family: "Times       New Roman"; 那么浏览器不会显示 Times New Roman 字体,而是搜索一个叫做“Times       New Roman”的字体。

至于“宋体”这样的字体名称,因为中间没有空白字符,因此完全没有必要加引号。但是考虑到并非左右的操作系统都有汉字支持,并且并非所有的程序员都会注意css文件的正确编码问题,所有保险起见,一般会加上引号。当然,解决这种问题的最好方法是使用别名。比如宋体,其实应该写成SimSun,这样哪怕浏览者的系统不支持中文,并且这个css文件被错误的编码成了GB2132也没问题,浏览器还是知道这是宋体,并且做出正确的字体搜索。可惜,不是所有浏览器都支持就是了……

 

  评论这张
 
阅读(15)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018