设计经验:谈谈web的默认字体

1. 优先级的描述不严谨,有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

2. Tahoma 字体从 Win95 就有了,并且从 Win2000 开始,Tahoma 成为 Win 英文系统的默认字体。2007 年,在 Mac OS X v10.5 (Leopard) 中也开始内置 Tahoma 字体。至今,普及性还是相当不错的。

3. Google, YAHOO 等网站,首选 Arial, 个人觉得是出于兼容性考虑。Google 需要考虑到对各种设备的支持,这就和 Google 首页继续采用 table 布局一样,table 布局可以保证在尽可能多的用户终端中正确显示。Arial 字体同理。

4. 但这并不代表 Google 等页面的做法就是最好的。从渐进增强角度讲,font-family: Tahoma, Helvetica, Arial, sans-serif; 可以达到优雅降级的目的。在更好的用户代理中,显示更好的字体,同时用 Arial 殿后,也能保证在尽可能多终端设备中正确显示。渐进增强无处不在,需要我们的共同努力和推广。(注:考虑 Mac 用户,Leopard 中内置了 Tahoma 字体,因此 font-family: Helvetica, Tahoma, Arial, sans-serif; 会更渐进增强一些)

5. 不推荐省略默认字体族。这就和省略 </body> 一样,99.99% 的情况下不会导致问题,并且是一种优化手段。但除了特殊页面(比如 Google 首页),普通页面普通流量下,节省这一点字符,不利于 Web 标准的整体进步。

6. 不设置宋体,在 GBK 编码时,英文操作系统下,IE 的默认字体是 Microsoft Sans Serif Regular. (注:不设置 sans-serif 可以避免此问题,但考虑上面第 5 条,依旧推荐前面加“宋体”来解决该问题)

7. 根据可用性大师 Jackob Nielsen 的调查,在目前计算机显示器的 dpi 下,无衬线字体比有衬线字体更易读。用户调研显示,Verdana 字体是易读性最高的,推荐设置为第一默认字体。这一点,可以参考 ALA 的字体设置,阅读起来的确很舒服。

8. Tahoma 字体的问题是,斜体时,特别是小号时,文字不易阅读,还有就是小麦总结过的下划线问题。Verdana 字体的问题是,字号相同时,比其它字体显示偏大偏宽,这导致混排时效果不佳。考虑中文网页中,一般很少用斜体,因此 Tahoma 依旧是首选。

9. 关于默认行高,对于博客等以大段文字为主的应用来说,1.5 是个很不错的选择。但对于淘宝的大部分页面来说,1.5 会导致 li, hx, div 等所有元素的默认行高都是 1.5, 这会给实际工作带来不少重置工作量和某些诡异 bug(小虎 & 有脚,赶快总结哦)。我更倾向于 body { line-height: 1; } p { line-height: 1.5; }

10. 字体对性能和效率的影响,可以忽略。有时候,勿以善小而为之。97% 的情况下,不成熟的优化是万恶之源。

11. 未来:若干年后,随着显示器 dpi 的提高,网页默认字体很可能会和传统印刷业的推荐字体一致 —— 采用衬线字体。等以后再说了。

最后,我的推荐是:

body { font: 12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif; }
p { line-height: 1.5; }

欢迎讨论。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索字体
, 问题
, 网页
, 用户
, 网页table字体
, 推荐
, sans-serif
渐进增强
,以便于您获取更多的相关知识。

时间: 2024-09-29 07:26:30

设计经验:谈谈web的默认字体的相关文章

交互设计经验分享:WEB拖放交互设计

文章描述:交互设计经验分享:WEB拖放交互设计.   开篇呈上赵本山和宋丹丹的小品笑话:  要把大象放进冰箱总共分几步? 把大象塞进冰箱要3步:1 把冰箱门打开:2 把大象装进去:3 把冰箱门带上. 这虽是一则脑筋急转弯的笑话,但却提炼出我们生活中将一个物体放进另外一个物体里通常有的3个步骤. 1.    虚实结合的世界  随着信息化时代的到来,我们的生活不仅局限于可触摸的自然环境,而且拓展到无形的虚拟环境中.继而,真实生活中的行为,如购物.交友.娱乐,也会映射到虚拟环境里.虚拟世界中,鼠标.键

Web API接口设计经验总结

在Web API接口的开发过程中,我们可能会碰到各种各样的问题,我在前面两篇随笔<Web API应用架构在Winform混合框架中的应用(1)>.<Web API应用架构在Winform混合框架中的应用(2)--自定义异常结果的处理>也进行了总的介绍,在经过我的大量模块实践并成功运行后,总结了这篇随笔,希望对大家有所帮助. 1.在接口定义中确定MVC的GET或者POST方式 由于我们整个Web API平台是基于MVC的基础上进行的API开发,因此整个Web API的接口,在定义的时

《响应式Web设计实践》一2.2 字体大小

2.2 字体大小 响应式Web设计实践 要想让你的设计拥抱Web的流动性,那就意味着在你的设计中要能够灵活地改变字体大小.你可以在Web上使用任意单位来设置字体大小,但主要的方法不外乎三种:像素.em,还有百分比. 2.2.1 像素 长期以来,像素一直都是人们喜欢使用的字体大小单位,其原因很简单:无论浏览器如何设置字体大小,你都能对其进行精确的控制.如果你把字体设置为18px,那么每个浏览器都会将其准确地显示为18px. 但这样的掌控是要付出一定代价的.对于初学者而言,虽然使用像素作为字体大小单

WEB设计经验 -来自microsoft.com设计主管

web|设计 作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中心.产品目录.配置文件中心. 搜索 和注册等联机功能. 他为几个内部工具设计了用户界面,并且正致力于创建将于今年晚些时候发布的下一代主页. 从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计.的确,这些确实是我所关注的.视觉上的吸引力是重要的,但是这仅仅是工作的一小部分.而最终的目的是确保整个站点运

WEB设计经验 -来自微软设计主管

web|设计|微软 从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计.的确,这些确实是我所关注的.视觉上的吸引力是重要的,但是这仅仅是工作的一小部分.而最终的目的是确保整个站点运转正常. 我的意思是,人们通常在访问 microsoft.com 时,并未将它当作艺术作品来赞赏.而是为了获得有关产品的信息,或者有一些技术问题需要咨询,或是阅读有关开发商的期刊.所以网站的设计应该尽量清楚和有条理,以便他们能够容易地找到所需信息. 设计站点 在进行 Web

详解CSS网页布局中默认字体样式

核心提示:浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法. 浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做

国外设计参考:以web设计为主的国外设计博客

以web设计为主,兼之前端技术.平面.矢量.摄影以及素材.来源都是国外的blog.虽然都是英文的,但基本图像就可以说明一切,所以英语不好的同学也不用有负担. -----------------------------– Interview With Digital Artist Ferdi Rizkiyanto aka Pepey Pepey.是来自印尼著名平面设计师,他关于温室效应的招贴设计全球闻名(有沙漏的那幅).他的作品中既有激动人心的创造力,又具备无与伦比的细节.在一些广告设计中使用的三

解析CSS设置默认字体样式

默认字体样式会因为浏览器不同,版本不同,甚至操作系统不同的设置不同导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法. 拿字体来说,各个浏览器默认的字体种类.字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此.所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率. 样式优先级 通常用户看到的

CSS网页布局中默认字体样式

  拿字体来说,各个浏览器默认的字体种类.字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此.所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率. 样式优先级 通常用户看到的页面的样式会受到三层控制: 第一层是浏览器的默认样式 第二层是网页定义样式 第三层是用户自定义样式 和CSS一样,后面的优先级 高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高.不过,