Use legible font sizes

On this page

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

概览

You can use the followingFour commonly used unitsTo specify the page font size: pixels (px), dots (pt), em (em), and percentages (%).

  • 像素即“CSS像素”，会因设备尺寸和密度而异。
  • 点是相对于像素而定义的。一个像素是0.75点*.
  • EM and Percentage are "relative" units: These are relative to the use of font sizes and attributes. 1 EM equates to 100%.

 

*请参见其他说明。

此外，ViewportWill affect how fonts are scaled on mobile devices. Web pages that do not have a properly configured viewport will be scaled down on mobile devices, which often results in small and illegible text on the page.

建议

首先，Configure ViewportTo ensure that the font will be scaled as expected in each device. After configuring the viewport, implement the following additional recommendations:

 

  1. 使用16 CSS像素的基准字体大小。根据要使用的字体的属性按需调整字体大小。
  2. 使用相对于基准字体的字体大小定义排版比例。
  3. 每行文字的字符之间需要留出一定的垂直空间，而且还可能需要根据每种字体进行不同的调整。我们通常建议您使用浏览器默认的行高1.2em。
  4. 限制所用字体的数量以及排版比例：过多字体和字体大小会导致网页布局杂乱且过于复杂。

For example, the following CSS code snippet defines a baseline font size of 16 CSS pixels, where the font size is defined as 75% of the baseline font size (i.e. 12 CSS pixels) in the CSS class "small" and 125% of the baseline font size (i.e. 20 CSS pixels) in the CSS class "large":

body { font-size: 16px; } .small { font-size: 12px; /* 75% of the baseline */ } .large { font-size: 20px; /* 125% of the baseline */ }

 

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

Other information

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

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

For this reason, we recommend that you use pixels to define the font size. Otherwise, some designers and developers may be misled to see that the units used are inches or dots, because although these units are also physical dimensions, they are not necessarily equivalent to real-world dimensions. Think of pixels as units that change the display size according to the size of your device.

Finally, each font has its own characteristics: size, spacing and so on. By default, the browser will display each font in 16 pixels (CSS pixels). This default setting works for most situations, but some specific fonts may need to be adjusted additionally, that is, you can set a lower or higher default font size to suit different font properties. Then, after the default size is set, define larger and smaller fonts based on the default pixel size to adjust the text size of major, minor, and other types of content on the Web page.

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

 

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License. For details, see our Site Policies.