CSS 字体小贴士May 28, 2008

今天收到份临时需求,就是将中文和英文控制在同一宽度以内(两个英文/数字的宽度为一个中文字符),我的解决方案是

font-family: Simsun,sans-serif;

看起来的效果就是这样的

http://files.gracecode.com/2008_05_28/1211940877.png

这里有点的担忧就是使用 Simsun 字体(也就是 Windows 下的“宋体”),在别的系统(比如 Mac 和 Unix 系列)是否能显示保持一致的效果。

有更好的解决办法的朋友,欢迎提出。另外,还有其他一些有用的资源,在这里列出下。

Windows 系统下默认的英文字体 Cheat Sheet(已打包,推荐下载)

有关 font-family 属性的介绍,比较基础

CSS Font Family 视频教程(老外慢条斯理的声音让我受不了)

A List Apart 上的篇文章,同样不错

Safari 为何显示宋体的原因

Top 10 常用的英文 Blog 字体(这个站点还有很多的 Top 系列,值得一看)

手机 Wap 下的 CSS 字体控制(有待验证)

创建具有可访问性的 SliderMay 25, 2008

英文原文在此,对于 accessible 这个单词的理解,我个人认为是“可访问性”(原谅本人蹩脚的“国式英语”)。Slider 是 GUI 的基本控件之一,YUI 库中也有相应的组件,而我将其称之为“拉动条”。

废话不多说,下面我主要总结下原文作者的思路(翻译太麻烦,见谅)。在一般的情况下(二般的下面说),Slider 的值是唯一的。原作者认为从语义上理解,是个 select 元素集合,本人很是同意他的观点。

http://files.gracecode.com/2008_05_24/1211639806.png

但由于 CSS 对于 select 元素控制有限,原作者的方法是先使用 CSS 渲染某个 Javascript 动态生成的 div 容器(div 好控制得多,请再次原谅本人的 CSS 水准),然后使用 Javascript 将其动态的从视觉上替换这个 select,再将用户操作 div 的值传回给 select(范例)。

之所以这样的做法本人认为是具有“可访问性”的,是因为在没有 CSS 以及 Javascript 支持的情况下(因为上述的 div 根本就不会出现),用户仍然可以得知这个玩意是干什么的。

“二般”的情况,可能需要拉动条需要多个值(比如存储范围等)。则可以根据上述的思路,将两个指针到 div 中(这对于上述已经写好的 样式而言,并不复杂),然后分别代表两个 select 的值(范例)。

上述的原理和思路,本人认为并不复杂,但文章中作者的观点非常值得深究。尤其当用户使用“瘦的不能再瘦的浏览器”时,我们应当如何去处理。

自从传说中的 Web2.0 风起,很多“传统”的 “桌面 GUI 控件”都出现在 Web 中;同时很多现代的浏览器都提供了强大的“技术支持”(Javascript、CSS、Flash、etc...)。作为名 Web 开发人员,应当很清醒的意识到,离开上述“先进的技术”,我们的 HTML(结构)代码,是否还是值得阅读的?

在此做个反省,此前本人做的一个进度条,目前看来毫无复用价值。

黑白的国殇日May 20, 2008

早上看到很多的站点都去了色,才了解到原来今天以及以后的三天都定为国殇日。随后,就接到上级的任务,将页面“去色”。

在这里和其他的同行说下,不要“偷懒”用 Explorer 的滤镜了,这样会使页面很慢而且只支持 Explorer。

在我负责的页面中,我用了个临时的 CSS 样式文件,将有颜色定义的全部 !important 了下(规则见此)。这对于已经被结构化的 CSS 而言,并不困难而且不影响速度,恢复起来也容易。

图片那边是运营自己搞定了,不知道他们从那里搞来的一个软件,可以批量将图片去色。

OK,最后看下页面的效果。在这里赞一下拍拍,他们的速度是最快的,而且非常有诚意的将样式和图片都去了色。

http://files.gracecode.com/2009_11_05/41425594b526.jpg

http://files.gracecode.com/2009_11_05/43341594e9c2.jpg

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
Yahoo 统计