默认Web字体样式
作者：秦歌 来源：随网之舞 发布时间：2009-11-24 12:37:00
通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。
拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。
以后准备使用如下默认字体样式：
body{ font: 12px/1.5 arial;}
字体：arial
我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：
Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手
tahoma和helvetica就没有这么幸运了。视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为
font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用
font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。
使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。
0
投稿猜你喜欢
- 我们知道，数组的sort方法可以对数组元素进行排序，默认是按ASCII字母表顺序排序。如果要根据其他的顺序排序就需要为sort方法提供一个比
- 大家一定使用过 phpmyadmin 里面的数据库导入，导出功能，非常方便。但是在实际应用中，我发现如下几个问题：1、数据库超过一定尺寸，比
- 代码和说明如下：<％Const ForReading = 1 &nbs
- 在程序调试中，有时候需要知道有多少Session变量在使用，她们的值如何？由于Session对象提供一个称为Contents的集合(Coll
- 网页编程中，在与数据库打交道的时候我们经常会碰到乱码的经常。本文就将介绍一种ASP读取MySQL数据库出现乱码的解决办法。情景再现：使用My
- AddHeaderAddHeader 方法用指定的值添加 HTML 标题。该方法常常向响应添加新的 HTTP 标题。它并不替代现有的同名标题
- 某天和一个产品经理聊起：以用户为中心是一个理想概念。经历了太多的项目，看到了太多的限制条件。而我向来不是一个有着设计洁癖的完美主义者。做为所
- 跨浏览器的本地存储（一）：userData behaviorDOM Storage，是基于 Web Applications 1.0 spe
- Windows下ORACLE完全卸载：使用OUI可以卸载数据库，但卸载后注册表和文件系统内仍会有部分残留。这些残留不仅占用磁盘空间，而且影响
- 联合结果集 新建临时工数据表 代码如下:CREATE TABLE T_TempEmployee (FIdCardNumber VARCHAR
关于导航栏的设计有很多特效，但你浏览过这样一种导航栏特效吗？当鼠标移到导航栏目上时，导航栏目会被一层“- 在网站建设中，分类算法的应用非常的普遍。在设计一个电子商店时，要涉及到商品分类；在设计发布系统时，要涉及到栏目或者频道分类；在设计软件下载这
- 有些网页制 * 好者提出了这样一个问题——怎么使用Dreamweaver制作出交换图像来。今天，我向大家介绍制作复杂交换图像的方法，相信能够对
- 来炫耀一下，谁看得懂我写的加密算法写了一整天了，这个代码用于ajax提交，要求就是加密后内容不能变得过长，加密解密需要效率高，至于安全性，被
- 在一些网页应用中，就比如在投票系统中，当我们进行的是多项投票时，我们要求用户最多只能选择几项进行投票，这也是就是说选择复选框的个数最多几个.
- 代码如下:--CAST 和 CONVERT 函数 Percentage DECLARE @dec decimal(5,3), @var va
- 小的本身是一个平面设计人员，前一阵儿有一些空闲的时间，便在各个站长网上发布了贴子，大意是免费制作logo，以换取网站连接(相信很多人都看过)
- 在SQL Server数据库管理中，针对分析服务Analysis Services 的性能优化必不可少，这里我们将学习到使用DMV来进行An
- 一：操作redis1：redis拓展安装composer require predis/predis或者你也可以通过 PECL 安装&nbs
- 上四篇的内容是把常用的XHTML标签拿出来介绍了一下，不是很详细。不过没关系，重点是要能先知道用他们，以后深入了再去细细研究更为详细的特性以
