再谈 Web 默认字体
作者:lifesinger 来源:岁月如歌 发布时间:2009-11-24 12:48:00
秦歌这篇文章总结得很不错,俺挑刺来啦:
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; }
欢迎讨论。


猜你喜欢
- 因为Python是自带文档,可以通过help函数来查询每一个系统函数的用法解释说明。一般来说,关键的使用方法和注意点在这个系统的文档中都说的
- Pycharm是当前进行python开发,尤其是Django开发最好的IDE。GitHub是程序员的圣地,几乎人人都在用。本文假设你对pyc
- 最近自己在抢冰墩墩钥匙扣,发现一秒瞬间就没了。于是自己网上学习了一下,写了一个抢购脚本。亲测可用。具体使用步骤如下:一、官网下载火狐浏览器二
- 顺序表python版的实现(部分功能未实现)结果展示:代码示例:#!/usr/bin/env python# -*- coding:utf-
- 想要在准备查询混合数据库系统时将SQL Server转换为 XQuery 和进行反向转换吗?了解如何开发 Web 服务来从SQL Serve
- 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。 1、使用meta标签,这也是普
- pip用pipdeptree查看包依赖1、安装pipdeptreepip install pipdeptree2、使用pipdeptree查
- 马氏距离区别于欧式距离,如百度知道中所言:马氏距离(Mahalanobis distance)是由印度统计学家马哈拉诺比斯(P. C. Ma
- 找了半天,以为numpy的where函数像matlab 的find函数一样好用,能够返回一个区间内的元素索引位置。结果没有。。(也可能是我没
- 本文实例讲述了jQuery+php简单实现全选删除的方法。分享给大家供大家参考,具体如下:<input type="chec
- view视图import reimport osimport mimetypesfrom wsgiref.util import FileW
- 记录一些pandas选择数据的内容,此前首先说行列名的获取和更改,以方便获取数据。此文作为学习巩固。这篇博的内容顺序大概就是: 行列名的获取
- 前言本文主要给大家介绍的是关于SQL Server查找包含空格的表和列的相关内容,为什么会有这篇文章,是因为最近发现一个数据库中的某个表有个
- 一、常见的匹配规则二、常见的匹配方法1、match()match()方法从字符串的起始位置开始匹配,该方法有两个参数,第一个是正则表达式,第
- 实例如下所示:import timeimport pickleimport osimport reclass LogIncScaner(ob
- 在 Python 中,if 语句用于根据条件执行不同的代码块。它的基本格式如下:if condition: # 如
- 实时读取logstash日志,有异常错误keywork即触发报警。# /usr/bin/env python3# -*- coding: u
- 我们经常会遇到这样的问题你还在为你的MySQL命令模式下,前面的提示信息还是:mysql>,那么我们如何更改mysql命令下提示信息呢
- 也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部
- Anaconda 是一个旗舰版的python安装包, 因为普通的python没有库, 如果需要安装一些重要的库, 要经常一个一个下载,会非常