网站建设中关于默认字体你需要了解

首页> 缘震优势

缘震优势

2017-11-17 09:19:21

网站建设中关于默认字体你需要了解

首先要从浏览器默认字体说起，浏览器中的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

第一：字体arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

1，Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。

2，视觉设计的专业人士可能会认为在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;}也是很合理的选择。

第二：样式优先级

通常用户看到的页面的样式会受到三层控制:

1，浏览器的默认样式； 2，网页定义样式； 3，用户自定义样式。

和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

第三：大小12px

12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。

不用考虑基于字体大小（em）的设计。

在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

第四：行高1.5倍

这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。

在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。

设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。

五：性能和效率第

1，大部分平台都有arial，减少浏览器的查找时间。

2，代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。

3，所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。

中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。

通过对中英文及符号混排的测试，我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话，在firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。

虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

建网站不能只做网站还要为排名着想

一、首先要杜绝建网站时产生的空页面，网站上的空页面就像做木工时所剩余的边角料一样，没有什么实际意义，需要删掉，而不是选把页面空在那里等到有内容再去加，建网站到网站上线时要确保每个页面内容都是丰富的，要把把内容补充完整，要么删掉，如果一个页面留几个字不去删掉反而会让搜索引擎觉得这是一个低质量的页面，一个倒影响不大，但低质量的页面多了占有一定的比例之后，就会让搜索引擎觉得整个网站都低质量的，那就基本不会再让这个网站去参与排名了。一些企业网站过了一个月了首页还没有被百度所收录就是这个道理，经常会有客企业来咨询说是为什么建的网站都上线这么久了还不能在百度找到网站，结果一看网站上还是只有几个字，只是一个空架子，试问，百度收录这种网站做什么？白白的占用自己的数据库吗？所以建网站要把站内的内容丰富起来，把没有内容的页面先删除，等到有内容时再创建页面。

　　二、前边提到的建网站留过多空白页面会影响排名，但这一种内容方面却是不缺，但是一样没有排名，这是为什么呢，因为虽然有内容，但都是一些没有意义的产品型号字符与产品图片，没有文字类的内容，我们要知道，搜索引擎判断页面内容的主要依据就是页面中的文字内容，排名所依据的也是文字内容，一些网站上虽然看起来图片比较丰富，但搜索引擎给图片归类的依据也是图片标签中的文字内容，所以，如果没有文字，只有图片与产品型号，除非这个型号比较有名，否则搜索引擎一样不能判断这个页面是什么什么的，也就没有办法给这个页面进行排名了。在建网站时要能对图片的alt属性进行编辑，这样一来在上传图片时，在alt处输入图片的介绍信息，搜索引擎在抓取时就能判断这个图片的信息了。

　　三、最后是建网站公司经常发现的一种小聪明形式的错误，一些客户在建网站时在底部友情链接的位置加上一些知名网站的链接，以为会对排名有所帮助，其实则不然，要知道这种链接是单向的，对于网站排名来说百害而无一利，对于链接来说，网站上不能添加出站链接，因为这会造成权重的流失，只有双向的链接才是对网站排名有利的，可以与相关的同行网站进行交换。当然，如果有关系的话加上一些大站的链接也是不错的。