用动态CSS解决网页的大小字体问题~~论坛推荐～！！！
在目前的网页开发中，大小字体的判断是令网页开发人员很头痛的问题。Windows系统的屏幕字体缺省为小字体，在15英寸的显示屏上，640×480小字体和800×600大字体有比较好的视觉效果，而在17英寸的显示屏上，800×600的小字体和1024×768的大字体效果较好。现在的客户端脚本可以判断显示器的分辨率，但无法判断用户所采用的是大字体还是小字体。开发人员辛辛苦苦设计的网页往往只在特定分辨率、特定字体尺寸下才显得很“完美”，而在另外一些条件下，则可能会使得原本设计得很精致的网页变得不再精致，有些甚至因为字体不合适而使得网页面目全非，例如表格的折行，有时会使表格中的切割图片无法辨认。这的确是长期困扰网页设计人员（甚至包括一些程序开发人员）的大难题。
现在的网页比较通用的两种字体尺寸分别是9pt和12px，但不论是那一种，都无法在不同分辨率、不同字体尺寸下达到最好的效果。比如目前很流行的12px字体，在17英寸显示器下，当屏幕分辨率设置为1024×768大字体时，网页字体显得太小，严重影响阅读效果。
有没有一个通用的解决办法，可以使网页适合所有的分辨率和字体呢？很不幸，答案是否定的，甚至一些可执行程序，目前也没有很好地解决这个问题，例如著名的Dreamweaver 3。如果脚本程序无法判断用户的字体大小，这个问题是无法彻底解决的。但网页开发人员可以采用一种折衷的办法，让用户自己决定。也就是说网页开发人员分别针对不同的浏览环境设置不同的字体尺寸，由用户自己决定采用多大的字体，即让用户可以“定制”网页格式，这也就用到了动态CSS。所谓动态CSS，就是将CSS中决定字体、颜色等样式的数值作为变量独立出来，由程序或用户根据不同的浏览环境赋不同的值，再呈现给用户。动态CSS并不是什么新东西，很多网站早已在服务器端的脚本上实现了这些功能，例如，判断用户所用的浏览器是IE还是NS，分辨率又是多大，再分别调用不同的样式表文件。但对客户端脚本来讲，要实现这些功能还需要探讨。
笔者经过仔细研究与摸索，实现了在客户端单一网页上定制CSS的方法，下面就谈谈本人在客户端脚本中现实动态CSS的思路，希望与各位同行切磋。
附件中有一个客户端动态CSS的例子，包括3个文件：css.html、cookies.js、dyncss.js。
1）css.html：包含动态CSS的网页，所有样式均由dyncss.js脚本中定义的CSS控制。在<HEAD></HEAD>之间包含CSS样式表的部分由下面两行替换：
<SCRIPT SRC="cookies.js" LANGUAGE="JavaScript"></SCRIPT>
<SCRIPT SRC="dyncss.js" LANGUAGE="JavaScript"></SCRIPT>
2）cookies.js：一个读写Cookie的脚本，定义了Cookie对象和Cookie.store（写入Cookie）、Cookie.get（读取Cookie）两种方法。
3）dyncss.js：实现客户端动态CSS的脚本，所有的动态样式都在该脚本中定义。其运行流程如下：
（1）从Cookie读取字体、配色样式索引值，若没有该值，就使用默认值。
（2）根据字体、配色样式索引值，设置CSS中的变量值。如字体尺寸、前景背景颜色、表格颜色、标题行颜色等。
（3）将包含变量的动态CSS写入文档。
（4）显示字体和配色列表框。若用户改变了字体和配色方案，调用函数function SetCSS( )将字体、配色索引值写入Cookie，并刷新文档。
程序简介如下：
function SetCSS( ) //读取用户设置的字体、配色索引，将其写入Cookie
{
读取字体列表框索引值document.form1.select_1.selectedIndex；
读取配色列表框索引值document.form1.select_2.selectedIndex；
将字体索引值写入textidx；
将配色索引值写入coloridx；
改变样式后刷新屏幕location.reload(true)；
}
从Cookie读取字体索引值textidx；
如果textidx不存在，取默认字体，textidx="0"；
从Cookie读取配色索引值coloridx；
如果coloridx不存在，取默认配色，coloridx="0"；
switch (textidx) //根据字体索引值配置字体尺寸
{
case i：
字体i方案变量赋值；
break；
}
switch (coloridx) //根据配色索引值配置颜色
{
case i：
配色i方案变量赋值；
break；
}
写入包含字体、配色变量的CSS：document.write(sty)；
//设置样式表选项
document.write("<form name=form1>")；
document.write("<select name=\"select_1\" onchange=SetCSS()>")；
写入字体方案选项；
document.write("</select>")；
document.write("<select name=\"select_2\" onchange=SetCSS()>")；
写入配色方案选项；
document.write("</select>")；
document.write("</form>")；
//在列表框中选择用户选定的方案
document.form1.select_1.options[textidx].selected=true；
document.form1.select_2.options[coloridx].selected=true；
css.html文件中，dyncss.js运行完毕后，接着调入其余内容。由于CSS已经设置完毕，故随后所用到的样式都遵循dyncss.js设置的CSS格式，显示给用户的就是用户所定制的了。
这种由用户来定制的网页现在应用不是十分普遍，原因大概如下：
（1）认为12px或9pt就可以满足所有的环境，这种看法相当普遍。但如果看看那些因表格折行而错乱的网页，就知道想法对用户不太负责。
（2）服务器端虽然可以实现动态CSS，但用户必须与服务器端进行交互，影响速度。
（3）客户端脚本的编写有一定的困难，而且脚本文件必须包含在<HEAD>、</HEAD>之间，下拉列表框会影响网页的布局。为改善这一情况，可以对dyncss.js进行了一些修改，把下拉列表框隐藏到屏幕的左上角。
由用户选择网页的样式是一种新潮的想法，有一些网页开发人员也已经进行了这方面的尝试。The DocuMizer（http://www.cnblogs.com/flyaway007/admin/ftp://ftp.zdnet.com/devhead/rick_scott/ducumize.zip）就是一个很好的例子，但它的主要缺点是网页不能包含fram，因为它的配置脚本就在fram中。
现在的网页比较通用的两种字体尺寸分别是9pt和12px，但不论是那一种，都无法在不同分辨率、不同字体尺寸下达到最好的效果。比如目前很流行的12px字体，在17英寸显示器下，当屏幕分辨率设置为1024×768大字体时，网页字体显得太小，严重影响阅读效果。
有没有一个通用的解决办法，可以使网页适合所有的分辨率和字体呢？很不幸，答案是否定的，甚至一些可执行程序，目前也没有很好地解决这个问题，例如著名的Dreamweaver 3。如果脚本程序无法判断用户的字体大小，这个问题是无法彻底解决的。但网页开发人员可以采用一种折衷的办法，让用户自己决定。也就是说网页开发人员分别针对不同的浏览环境设置不同的字体尺寸，由用户自己决定采用多大的字体，即让用户可以“定制”网页格式，这也就用到了动态CSS。所谓动态CSS，就是将CSS中决定字体、颜色等样式的数值作为变量独立出来，由程序或用户根据不同的浏览环境赋不同的值，再呈现给用户。动态CSS并不是什么新东西，很多网站早已在服务器端的脚本上实现了这些功能，例如，判断用户所用的浏览器是IE还是NS，分辨率又是多大，再分别调用不同的样式表文件。但对客户端脚本来讲，要实现这些功能还需要探讨。
笔者经过仔细研究与摸索，实现了在客户端单一网页上定制CSS的方法，下面就谈谈本人在客户端脚本中现实动态CSS的思路，希望与各位同行切磋。
附件中有一个客户端动态CSS的例子，包括3个文件：css.html、cookies.js、dyncss.js。
1）css.html：包含动态CSS的网页，所有样式均由dyncss.js脚本中定义的CSS控制。在<HEAD></HEAD>之间包含CSS样式表的部分由下面两行替换：
<SCRIPT SRC="cookies.js" LANGUAGE="JavaScript"></SCRIPT>
<SCRIPT SRC="dyncss.js" LANGUAGE="JavaScript"></SCRIPT>
2）cookies.js：一个读写Cookie的脚本，定义了Cookie对象和Cookie.store（写入Cookie）、Cookie.get（读取Cookie）两种方法。
3）dyncss.js：实现客户端动态CSS的脚本，所有的动态样式都在该脚本中定义。其运行流程如下：
（1）从Cookie读取字体、配色样式索引值，若没有该值，就使用默认值。
（2）根据字体、配色样式索引值，设置CSS中的变量值。如字体尺寸、前景背景颜色、表格颜色、标题行颜色等。
（3）将包含变量的动态CSS写入文档。
（4）显示字体和配色列表框。若用户改变了字体和配色方案，调用函数function SetCSS( )将字体、配色索引值写入Cookie，并刷新文档。
程序简介如下：
function SetCSS( ) //读取用户设置的字体、配色索引，将其写入Cookie
{
读取字体列表框索引值document.form1.select_1.selectedIndex；
读取配色列表框索引值document.form1.select_2.selectedIndex；
将字体索引值写入textidx；
将配色索引值写入coloridx；
改变样式后刷新屏幕location.reload(true)；
}
从Cookie读取字体索引值textidx；
如果textidx不存在，取默认字体，textidx="0"；
从Cookie读取配色索引值coloridx；
如果coloridx不存在，取默认配色，coloridx="0"；
switch (textidx) //根据字体索引值配置字体尺寸
{
case i：
字体i方案变量赋值；
break；
}
switch (coloridx) //根据配色索引值配置颜色
{
case i：
配色i方案变量赋值；
break；
}
写入包含字体、配色变量的CSS：document.write(sty)；
//设置样式表选项
document.write("<form name=form1>")；
document.write("<select name=\"select_1\" onchange=SetCSS()>")；
写入字体方案选项；
document.write("</select>")；
document.write("<select name=\"select_2\" onchange=SetCSS()>")；
写入配色方案选项；
document.write("</select>")；
document.write("</form>")；
//在列表框中选择用户选定的方案
document.form1.select_1.options[textidx].selected=true；
document.form1.select_2.options[coloridx].selected=true；
css.html文件中，dyncss.js运行完毕后，接着调入其余内容。由于CSS已经设置完毕，故随后所用到的样式都遵循dyncss.js设置的CSS格式，显示给用户的就是用户所定制的了。
这种由用户来定制的网页现在应用不是十分普遍，原因大概如下：
（1）认为12px或9pt就可以满足所有的环境，这种看法相当普遍。但如果看看那些因表格折行而错乱的网页，就知道想法对用户不太负责。
（2）服务器端虽然可以实现动态CSS，但用户必须与服务器端进行交互，影响速度。
（3）客户端脚本的编写有一定的困难，而且脚本文件必须包含在<HEAD>、</HEAD>之间，下拉列表框会影响网页的布局。为改善这一情况，可以对dyncss.js进行了一些修改，把下拉列表框隐藏到屏幕的左上角。
由用户选择网页的样式是一种新潮的想法，有一些网页开发人员也已经进行了这方面的尝试。The DocuMizer（http://www.cnblogs.com/flyaway007/admin/ftp://ftp.zdnet.com/devhead/rick_scott/ducumize.zip）就是一个很好的例子，但它的主要缺点是网页不能包含fram，因为它的配置脚本就在fram中。
