정확한 글꼴 크기 사용

On this page

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

概览

다음을 사용할 수 있습니다.4가지 상용 단위来指定网页字体大小：像素(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 CSS 픽셀을 정의한 다음 CSS 픽셀을 기준으로 다른 모든 단위(예: 인치, 센티미터 등)를 조정할 수 있습니다. 따라서 1 CSS 인치는 보통 실제 1 물리적 인치보다 작은 크기로 휴대폰에 표시된다.

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

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

일부 모바일 브라우저에서는 뷰포트를 적절하게 구성하지 않고 웹 글꼴의 크기를 조정할 수 있습니다. 이러한 크기 조절 동작은 브라우저마다 다르기 때문에 모바일 장치에 정확한 글꼴을 표시하기 위해 이 방법을 사용하지 않는 것이 좋습니다. 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 라이센스. For details, see ourSite Policies.