2004年04月16日 星期五

利用css动态改变字体大小

在这个可算是页面可用性的基本功能。只要页面的Accesibility和UI都站在用户的角度去考虑，把看似简单的东西都想到、做到。这就是一个合格的UI设计。切入正题。
在页面中用link命令导入需要的两个外部css文件。

[link rel="alternate stylesheet" href="http://www.designbyfire.com/large.css" type="text/css" title="large"/]
[link rel="stylesheet" href="http://www.designbyfire.com/small.css" type="text/css" title="small"/]

小字体› 大字体›
这里面的large.css和small.css两个文件就是定义了，基本的大小两种字体的样式表文件。怎么定义文字大小的这里就不多说了。我在本页面中，重新定义了P标签的字体大小。然后把你定义好的样式，应用到相应的段落中，或者是整个页面的样式。 另外，定义两组javascript函数。
function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; }
到此，基础工作就做好了。只要在页面中引用js函数就可以。 这样，就完成了利用css+js，动态改变页面字体大小的过程。wired和designbyFire都用到了类似的可用性技术。

[technorati relative tag]

[相关内容]

由 tristones 发表于 2004年04月16日 下午03時54分

留言

虽然自己在blog上面大谈usability,UI。但是，自己的blog在这方面却有大大的问题，一直很忙，加上我的MT系统一直有"\n"的问题，没办法解决，所以一直拖着没有改版面。
看来也只能慢慢再说了。

Posted by: tristones 发表于 2004年04月18日 下午08時39分

无论如何介绍的功能至少还是起作用的嘛!

如今的日子谁也没功夫一下子到位，有漂亮的CSS需要慢慢积累。。。

Posted by: crx 发表于 2004年05月29日 上午01時56分

请问怎样实现左边框架的更改？以及图片的显示？

Posted by: 张钰彬 发表于 2004年10月27日 下午10時00分