您的位置：建站学院首页 >> 文章 >> 网页设计 >> CSS
用动态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；
现在的网页比较通用的两种字体尺寸分别是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；