ps制作手机端网页字体大小_制作网页的最佳字体大小

ps制作手机端网页字体大小

To make web content work, text on a page must be readable for all visitors. Following a few basic rules will ensure that your text is as legible as possible:

要使Web内容正常工作，页面上的文本必须对所有访问者都可读。 遵循一些基本规则将确保您的文字尽可能清晰：

• It’s your duty to resist pressure from clients to fill the page with content. More text tends to create a crowded design, forcing font sizes to become smaller to compensate and overwhelming the casual visitor. Writing for the web is a skill that drives content in the opposite direction: making body copy as concise as possible.

  抵制来自客户的压力，使内容充满页面是您的责任。 更多的文字往往会造成拥挤的设计，迫使字体大小变小，以补偿和淹没临时访客。 网络写作是一种在相反方向推动内容发展的技能：使正文尽可能简洁 。

  The number of characters per line of body text (the CPL or measure) should fall below 100 characters: 80 – 95 characters per line is ideal. In most cases, text size should be based on this requirement: i.e. fonts should be scaled up or down, or the width of containers adjusted, until you have roughly 95 characters per line. Most sidebar text should be set to approximately 35 characters per line. These settings will need to change as screen sizes narrow, using the principles of responsive design.

  每行正文文本(CPL或度量 )的字符数应低于100个字符： 理想的是每行80-95个字符 。 在大多数情况下，文本大小应基于此要求：即应放大或缩小字体，或调整容器的宽度，直到每行大约有95个字符为止。 大多数侧边栏文本应设置为每行大约35个字符。 使用响应式设计原理，随着屏幕尺寸变窄，这些设置将需要更改。

  Generally speaking, readers want text to be larger than most designers are comfortable with. As a designer, you are looking at the content of a page every day; after a period of time, you will stop “seeing” it, and assume that everyone reads the text as instinctively as you do. It’s generally a good rule to size text slightly larger than you think it needs to be.

  一般而言， 读者希望文本比大多数设计师所喜欢的大 。 作为设计师，您每天都在浏览页面的内容； 一段时间后，您将停止“查看”该文本，并假定每个人都像您一样本能地阅读该文本。 通常，将文本的大小设置为略大于您认为需要的大小是个好规则。

  Leading is as important as font size for legibility. The vertical space between lines of text should be adjusted to optimize the readability of text.

  引导与字体大小一样重要，以提高可读性 。 文本行之间的垂直间距应进行调整，以优化文本的可读性。

To this end, there are a few practical measures to take when writing the CSS for a site to create conditions of optimal legibility:

为此，在为站点编写CSS时应采取一些实际措施，以创建具有最佳可读性的条件：

1. 1. The lazy, long, works-with-IE8-and-lower method starts your stylesheet with the following declaration:

      懒惰的，长的，可与IE8配合使用的方法使用以下声明开始样式表：

      body {
      	font-size: 62.5%;
      }

      This “mini-reset” sets 1em = 10px, allowing you to easily convert between the two units. Typically, you would follow this with declarations for text elements:

      此“ mini- reset ”设置1em = 10px ，使您可以轻松地在两个单位之间转换。 通常，您将在此之后声明文本元素：

      p, li {
      	font-size: 1.6em;
      }

      There are two disadvantages to this approach. First, you have to size every text element in your stylesheet, including paragraphs, headings, and list items, as the base size of 10px / 1em is far too small. Second, em units “cascade up”, meaning that certain combinations of elements, such as nested lists, will render larger than expected on screen. These can all be compensated for, but I prefer an alternative approach:

      这种方法有两个缺点。 首先，您必须调整样式表中每个文本元素的大小，包括段落，标题和列表项 ，因为10px / 1em的基本大小太小了。 其次， em单元“层叠”，这意味着某些元素组合(例如嵌套列表 )将在屏幕上呈现比预期更大的尺寸。 这些都可以得到补偿，但是我更喜欢另一种方法：

   2. The better, faster, method that works with all modern browsers, including IE9+, starts with the following:

      适用于所有现代浏览器(包括IE9 +)的更好，更快的方法从以下内容开始：

      html {
      	font-size: 62.5%;
      }
      body {
      	font-size: 1.6rem;
      }

      Now every text element is set to a default size of 1.6rem (rem = root em unit). This becomes the baseline for all text, and the basis for a grid system. After these style rules, you only have to provide sizes in your CSS for elements that are different from the base size, such as headings. Weird text cascade effects are also avoided.

      现在，每个文本元素均设置为默认大小1.6rem(rem = root em unit)。 这将成为所有文本的基准，并成为网格系统的基础。 遵循这些样式规则后，您只需在CSS中为与基本尺寸不同的元素(例如标题)提供尺寸。 还避免了奇怪的文本级联效果。

   Set a base size for text in your CSS.

   设置CSS中文本的基本大小。

2. Set a line-height that optimizes legibility. This is often a “by eye” judgment, as leading will change depending on the style and weight of the font. Multiplying the base size by the golden ratio can be a good place to start:

   设置线高以优化易读性 。 通常，这是一种“凭肉眼”的判断，因为前导会根据字体的样式和粗细而变化。 将基础大小乘以黄金比例可能是一个不错的起点：

   html {
   	font-size: 62.5%;
   } 
   body {
   	font-size: 1.6rem;
   	line-height: 2.56rem;
   }

3. Turn on auto-ligatures and kerning pairs

   打开自动连字和字距调整对

   html { 
   	font-size: 62.5%;
   } 
   body {
   	font-size: 1.6rem;
   	line-height: 2.56rem;
   	text-rendering: optimizeLegibility;
   }

   Read an in-depth explanation of automatic ligatures and kerning pairs with CSS.

   阅读有关CSS的自动连字和字距调整对的深入说明。

   Size containers to allow text to be read easily

   调整容器大小以使文本易于阅读

   As an example:

   举个例子：

   * {
   	box-sizing: border-box;
   }
   p {
   	margin: 3.2rem 0;
   }
   article {
   	width: 150rem;
   	padding: 3rem;
   }

   Together with the CSS above, the <article> element will allow approximately 92 characters per line.

   与上述CSS一起， <article>元素每行将允许大约92个字符。

There are many more aspects to text legibility on the web, including color and typeface selection, but following these basic rules and practices should avoid most calamitous issues.

网络上文本的可读性还有很多其他方面，包括颜色和字体选择 ，但遵循这些基本规则和惯例应避免出现大多数灾难性问题。

翻译自: https://thenewcode.com/578/Crafting-Optimal-Type-Sizes-For-Web-Pages

ps制作手机端网页字体大小