在页面中用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都用到了类似的可用性技术。