20 th

March,2010 | CSS

关于网页的字体排版

Tags: , ,

页面的字体排版其实是比较棘手的一件事情,本人刚开始在设计页面的时候,对于字体属性的选择一直定不下来,不过在经过了几次设计之后,也稍微做了些总结,现分析如下:

这是我对于比较正规的页面考虑采用的样式

font: 12px/1.5 Tahoma, Times New Roman,Helvetica,sans-serif;

  1. 字体大小采用px为单位, 而不采用em. 因为em的可用性提升其实是很有限的,加上现在主流浏览器都支持“全页面缩放(Full Page Zoom)”功能了,所以基本可以不用考虑用em来实现了。
  2. 行高采用1.5, 也就是18px. 我觉得这是比较符合大家视觉的,相对于12px字体,这个行高看起来非常舒服。
  3. 字体样式默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。TahomaMatthew Carter为微软公司设计的一款字体,从Mac OS X 10.5开始,默认也捆绑了这款字体。但在Mac OS X 10.4及其之前的系统中,没有Tahoma字体。
  4. 而我将Times New Roman排在第二位,其实这款字体也是非常的耐看的,而且我觉得大家应该可以留意到,在我们用office word开始,这款字体就已经成为默认的英文字体了,可见其经典程度。所以我将其用来作为自己博客的logo字体。还有一款要推荐的字体就是看起来比Times New Roman更经典的系统默认字体,那就是Helvetica,这是一款已经超过50年历史的字体,在设计界的地位似乎无人能敌,大家可以参考这篇文章。已经其实我非常想将Helvetica放在首位的,不过,考虑到非Mac系统的Helvetica字体都是rip版,以及Windows的市场占有率,因此只能委屈Helvetica, 放在第三位了。
    放在最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义,针对这部分用户,sans-serif可能能派上用场。
  5. 最后,无论在XP还是Vista、Win7下,不指定网页的中文字体时,默认就是宋体或是微软雅黑。因此font-family属性里的’宋体’是多余的,可以省去。
11 th

March,2010 | Web

11款值得推荐的FireFox开发插件

现在Firefox已经成为一款非常流行的浏览器,特别是对于Web设计师而言。它不仅能呈现完全标准的页面,而且基于Firefox丰富的Web开发辅助插件更能让设计师的工作变得更加有效率。这里向大家推荐几款本人使用过的一些Web开发插件,而它们都是现在设计师相当流行使用的。

Firebug

Firebug能够调试所有网站语言,如Html,Css以及javascript调试等功能,而且它能在各种浏览器下都能使用包括(IE,Firefox,Opera, Safari等)。除此之外,还有一些很强大的功能,如html,css,dom的察看与调试,网站整体分析等等。总之,对于开发者来说它就相当一把瑞士军刀啊。

Interesting? … Continue Reading… »

27 th

February,2010 | CSS

为你的CSS技术评个等级

Tags: , ,

Reader Patrick,一位IT软件工程师,提出了一个我认为非常有趣的问题:
“对于我的公司,我正在开发一个项目他能让我们的开发者们能检查他们处在哪个特殊的知识领域。根据大多数的范围,我们设置了5个等级。这些特殊的知识领域的其中之一就是CSS。你知道一些很好的能描述你的CSS知识等级的在线材料吗?并且能够更适合开发者们自己能够评估他是否处于哪个等级?

一个读者提出了他在网络上搜寻到的关于这一点点的研究。在这上面呈现出了一些很有趣的事情,但在这篇文章里,1-4等级几乎是初学者而6级是“超级巨星”。那剩下的都在第5等级的CSS开发世界。

我认为如果我们都把我们的思想聚集在一起,就能提出一个更好的系统。我的一个想法就是如果你甚至连CSS不知道是什么,你就不需要一个评估等级,因此我们不必要仅仅为它而用整个等级。我们能指定第一级别给初学者而指定第五等级给高手。现在我们仅仅需要准确的分解那些组成这些知识等级的东西并试着去分解剩下的三个使之成为有意义的技巧。

仅此开始我们的粗略草案。我将会采用任何人在这方面的评测接着开发它使之成为更加充实的评估系统。我可能将它作为一个民意检测,这可能很搞笑~~ Interesting? … Continue Reading… »

10 th

February,2010 | Web

Google 将逐步停止支持IE6

现在有越来越多的公司开始停止对IE6这类老一代浏览器的支持了,近日,Google Apps的高级产品主管坦言,从Google Docs 和 Google Sites这两个产品开始,Google将不会再支持IE6了,因为你用IE6将体验不到这两个产品的新特性。详细内容大家可以参考Google Developer的官方博客.

我们也听说还有些设计者在坚持它的作品能完美的运行在IE6下,我相信这对于他来说将花去很多时间和精力来进行针对性的设计。其实对于绝大多数电脑菜鸟用户而言是没有必要升级浏览器的。所以现在的网络市场里,一些网站的IE6用户仍然占有很大一部分,如果我们忽视了这么一大批客户,可能是对自己的商业目的很不利的。但是,作为一个设计者,我仍然强烈建议所有的用户能够抛弃IE,去使用Mozilla FireFox或者是Chrome
Interesting? … Continue Reading… »

22 nd

May,2008 | JavaScript

解决多个window.onload引起的冲突

Tags: , , ,

我们在网页中可能要插入多个JS,可是如果在两个JS的代码中都使用了 window.onload,可能会出现两个JS不兼容的现象。可能就显示其中一个JS,而另一个就被忽略了,也就是同一个网页中不能出现两个 window.onload。这次本人在编写网页的时候就遇到了这个问题,因为如果只用一个JS就显得有点单调,如果重新编写JS代码又感觉太麻烦。这时我们就要用window.attachEvent和window.addEventListener来解决问题了。 Interesting? … Continue Reading… »

27 th

March,2008 | Web

Roundedcornr——圆角图片在线做

今天在网上无意中看到了一个能在线制作圆角图片的网站http://www.roundedcornr.com/,小试了一下,感觉相当不错。对Photoshop不是很熟悉的朋友这下可有福音了,在圆角的制作方面节省了不少时间。
Roundedcornr这个网站同时提供了在线生成css 圆角表格和css圆角边框代码。使用起来也相当简单,输入几个参数,点生成就可以输出相关代码,你拷贝下来小改一下就可以了。我主要介绍在线生成圆角图片的步骤,你可以把网页颜色选择调试器打开,用它来查找颜色的代码值,在制作时会用到。 Interesting? … Continue Reading… »