用户体验之使用清晰可辨的字体大小 移动时代网站

现在移动时代，手机成了最大的流量入口，网站不能适配手机，将会损失巨大，所以此篇文章，讲一讲移送设备易用性，使用清晰可辨的字体大小。

用户体验之使用清晰可辨的字体大小

当PageSpeed Insights检测到网页上的文字太小而难以辨认时，就会触发此规则。

概览

您可以使用以下四种常用单位来指定网页字体大小：像素(px)、点(pt)、EM(em)和百分比(%)。

像素即“CSS像素”，会因设备尺寸和密度而异。

点是相对于像素而定义的。一个像素是0.75点*。

EM和百分比是“相对”单位：这两个单位是相对于沿用已使用字体大小和属性而言的。1 EM相当于100%。

*请参见其他说明。

此外，视口会影响字体在移动设备上的缩放方式。未适当配置视口的网页会在移动设备上缩小显示，这通常会导致网页文字较小而难以辨认。

建议

首先，配置视口以确保字体将会在各个设备中按预期缩放。配置视口后，请实施下面这些额外的建议：

1.使用16 CSS像素的基准字体大小。根据要使用的字体的属性按需调整字体大小。

2.使用相对于基准字体的字体大小定义排版比例。

3.每行文字的字符之间需要留出一定的垂直空间，而且还可能需要根据每种字体进行不同的调整。我们通常建议您使用浏览器默认的行高1.2em。

4.限制所用字体的数量以及排版比例：过多字体和字体大小会导致网页布局杂乱且过于复杂。

例如，以下CSS代码段定义了16 CSS像素的基准字体大小，其中在CSS类“small”中将字体大小定义为基准字体大小的75%（即12 CSS像素），在CSS类“large”中将字体大小定义为基准字体大小的125%（即20 CSS像素）：

body {

font-size: 16px;

}

.small {

font-size: 12px; /* 75% of the baseline */

}

.large {

font-size: 20px; /* 125% of the baseline */

}

用户体验之使用清晰可辨的字体大小

对于适用于移动设备的其他字体建议，请参阅Android排版指南。

其他信息

请仔细阅读CSS 2.1规范，以了解长度单位的定义方式。该规范包含此处未提到的其他单位：英寸、厘米、毫米和皮卡。另外，有一点很容易被人忽略，那就是CSS中1英寸并不一定等于1物理英寸。

所有绝对单位都是相对于其他单位而定义的。1像素等于0.75点，1点等于1/72英寸，而1英寸等于2.54厘米等。不过，这些单位的“定位”最终都取决于设备。例如，在纸张上打印时，1英寸就会锚定为1物理英寸，其他所有单位应相对于物理英寸而定。然而，在手机上显示时，设备会根据著名的“参考像素”进行锚定。您可以根据此参考像素定义1 CSS像素，然后以CSS像素为参考来调整其他所有单位（例如，英寸、厘米等）。因此，1 CSS英寸通常会以小于现实中1物理英寸的大小显示在手机上。

鉴于这个原因，我们建议您使用像素定义字体大小。不然，某些设计人员和开发者看到所用单位是英寸或点时可能会被误导，因为这些单位尽管也是物理尺寸，但不一定等同于现实世界中的尺寸。请将像素想象成会根据所在设备的尺寸来变更显示大小的单位。

最后，每种字体还具有自身的特征：大小、间距等。默认情况下，浏览器将会以16像素（CSS像素）显示每种字体。这个默认设置适用于大部分情况，但某些特定字体可能需要再另外进行调整，也就是说，您可以设置较低或较高的默认字体大小，以适应字体的不同属性。然后，待默认大小设置完毕后，请根据默认像素大小定义较大和较小的字体，以便调整网页上主要、次要和其他类型内容的文字大小。

某些移动浏览器可能会在没有恰当配置视口的情况下尝试缩放网页字体。由于这种缩放行为因浏览器而异，因此您最好不要依赖这种方式来为移动设备显示清晰可辨的字体。PageSpeed Insights会照原样显示您网页上的文字，而不会应用浏览器指定的字体缩放比例。

本文属于原创文章！版权归甲爪广告联盟所有 文章由日付广告联盟www.jiazhua.com编辑整理更多相关文章推荐：