网站字号大小

 

　　文字大小，是用户体会中的一个重要部分。不一样的分辨率，不一样的显现器尺度，不一样的DPI，乃至不一样的浏览器设置，都会对最终展现的文字大小带来影响。虽然如今许多浏览器已经可以方便地缩放页面，但用户每次莅临都要重新缩放，总归费事，况且还有许多用户不知道如何缩放页面。最佳还是根据用户的分辨率给用户一个对比体贴的默认字号，那这个字号多大合适呢?

 

　　12px?14px?15px?16px? 还是压根就不应该运用px这个单位呢?

 

　　问题的根源，在于屏幕上的一切字号单位(px，pt，em)都是相对单位，单凭它们并不能断定文字的实际大小。况且人对文字大小的底子感知在于眼睛的视角，这不只取决于文字的物理尺度，还取决于它到人眼的间隔。

 

　　物理尺度

 

　　首先假定一个咱们期望达到的文字物理尺度，例如设定为17寸1280 *1024显现器上的16px，计算可得它的高度约是4.32mm，咱们计划让页面文字在大多数显现器上都对比接近这个大小，那么在不一样分辨率下应该显现成多大的字号呢?

 

　　第一步：计算用户主要的分辨率和对应的屏幕大小。

 

　　要在物理尺度和分辨率之间换算，首先要计算分辨率和对应的屏幕尺度。用户分辨率的分布情况可以从网站的计算日志里获得。因为每个分辨率设置能够对应好几个不一样尺度的屏幕，而屏幕尺度又无法通过页面获得，只好对如今的显现器市场进行计算分析：针对某一分辨率，计算能够的屏幕尺度范围，从最小到最大，相对主流的是多大(或运用该范围的中间值作为主流尺度)。如下图所示——

 

　　

 

 

 

　　电脑显现器市场(产品种类繁多，难免挂一漏万，数据仅供参考)

 

　　第二步：计算每个分辨率主流屏幕尺度的物理宽度

 

　　如今的显现器长宽比不只有4：3的标准屏，16：10的宽屏，16:9的宽屏标准屏还有更多不规则比例，为了在不一样长宽比的显现器之间进行对比，统一运用横向分辨率来计算。用主流尺度和长宽比(假设像素的长和宽相同)计算出屏幕宽度(英寸)，再换算成公制(毫米)，将其一一对应就可看出屏幕大小的趋势。再结合各分辨率的用户分布，成果如下图所示(图片中每个点对应一个分辨率，横轴为屏幕横向的像素数，纵轴为该屏幕的物理宽度，气泡大小表示运用该分辨率的用户人数。其间蓝色气泡表示标准屏，紫色表示宽屏)：最大的三个气泡分别是1920*1080，1280*1024，1280*800。

 

 

 

 

 

　　第三步：计算不一样显现器上的字号大小

 

　　用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数，就可以得到在不一样分辨率下所需的字号。例如要显现4.32mm见方的文字，各分辨率下分别需求如下的字号(对笔记本和台式机分别计算)：

 

 

 

 

 

　　不一样分辨率下需求的字号

 

　　可以看出笔记本和台式机的尺度相差很大，为方便运用，运用各分辨率的主流尺度或均匀尺度计算出指定字号在每个分辨率下所需的字号。(下图去掉了根本只用在笔记本上的那些分辨率)，以4.32mm、3.77mm、3.25mm为例(17寸1280*1024分辨率下的16、14和12号字)：

 

 

 

 

 

　　为坚持固定物理尺度，各主流显现器下所需字号与分辨率的关系

 

　　因为在未敞开cleartype的情况下，一些中文字体在非偶数字号下的显现效果欠佳，所以通常建议运用12、14、16、18、22px等偶数字号。也就是对某个分辨率选择离它最近的偶数字号。例如：屏幕横向分辨率在1100以下的选用14px，1100到1500选用16px，1500以上选用18px，依此类推。

 

　　到人眼的间隔

 

　　虽然笔记本的字号远小于台式机，可是实际并没有给咱们带来那么大的不便，这是因为：通常运用笔记本时人眼到屏幕的间隔比运用台式机时要近一些。当上网本越来越小时(极点的例子就是手机)，人们运用的时候能够会拿的更近，这样视角更大。反之，当显现器越来越大时(24寸甚至更大)，出于全体视角等方面考虑，人们也能够离屏幕远些，然后减小了视角。

 

　　定量来说：因为文字大小h(4~5mm)相对人眼到文字的间隔d(30~60cm)非常小，可近似认为视角θ正比于h，并与d成反比(θ≈tgθ=h/d)。也就是说，同样大小的文字，间隔二尺时看到的只有间隔一尺时的一半大小。

 

　　也就是说，显现器只能传达一个大约的尺度，每个用户在具体操作时仍会通过不自觉地调理到屏幕的间隔来调整所看到的实际效果。面对越来越多的笔记本用户(请参照上一篇：笔记本电脑的市场份额)，前端设计师们只能给出一个针对笔记本和台式机均匀尺度的页面效果，具体就靠用户去自我调整了。

 

　　用JS实现不一样分辨率下自动调整字号

 

　　例如页面正文所在div的id为content——

 

　　注：为保证各浏览器下文字均可缩放，字号单位运用em而不是px，通常来说，浏览器默认1em=16px，0.875em\1em\1.125em即为14\16\18px。

 

　　运用字号缩放时请注意：对该div内的标题等字号单位最佳运用百分比，而不是固定字号，以便随正文同步缩放。