一个简单的响应字体 这就是原因

一篇简单的响应式字体文章说，响应式设计的大部分焦点集中在两个主要领域：流畅，灵活的网格，流畅，弹性的图像。 他们不谈论字体。 但是，对于大多数网站而言，文本内容是最重要的元素。 当然，对网站图像或视频主要内容的响应类型不太重要，但是仍然不能忽略。 好消息是响应字体并不是特别难于实现。 我们只需要花一些时间思考我们的类型应该如何响应屏幕尺寸的变化，然后实现这些变化。 ，时至2020年09月08日浅说一个简单的响应字体，不明白的一起看看吧。

浅说一个简单的响应字体：

响应原理，但创建有效的响应字体 主要原则。 首先是调整类型。 这意味着调整不仅基于屏幕的大小类型，而且还可以由用户调整大小。 第二个是优化行长以保持可读性。 这意味着对于某些屏幕，尽管可以扩大内容，但保持内容区域较小和缩短行长更为有意义。

可调整大小的类型使用REMS。 大多数设计人员使用像素或EMS尺寸类型。 EMS是更好的选择，因为它们允许用户调整其浏览器的类型。 但是EMS是相对于父元素而言的，这意味着它们的使用要比像素复杂，像素是唯一具有更多尺寸关系要跟踪的复合响应设计。 REMS EMS提供了更好的选择。 它们的工作方式几乎相同，除了一个关键的区别：REM的单位是相对HTML元素，而不是单个父元素。 这使得维护类型的大小更直接。

现在，所有主要的现代浏览器都支持REM单元，包括版本11.6和IE9的Opera。 尽管您可能希望包括早期浏览器的后备功能，但它们现在正在使用的REMS拥有足够的支持。 因为您将使用地雷单位大小类型，所以请确保将重置HTML元素，而不是body元素。 因此，它看起来应该像这样：

当然，这是一篇文章，旨在简化代码，但为您提供了一个起点。 您可能会注意到的最小屏幕是指定了稍大的

可调整大小的类型是一个非常简单的概念。 跨多个设备保持适当的线长有点恶作剧。 关于可读性的最佳行长有很多争论，但是根据Baymard Institute的说法，似乎每行50到75个字符之间存在一致的位置。 他们还建议您为内容使用固定宽度的容器，但是这样做不能达到响应式设计的目的，因此，如果我们想使响应保持最佳的行长，我们需要做一些不同的事情。 首先，查看要设计的不同屏幕尺寸，并找出应该使用的字体（每行约50个字符）。 对于非常小的屏幕，您可能需要每行少于50个字符以保持可读的字体大小，但是50个字符应该是目标。 这为字体大小提供了一个很好的起点。

我们还应该设置文本内容的最大宽度（或突破点）。 使用给定的屏幕尺寸时，请查看尺寸类型，然后确定内容容器的宽度，每行大约有75个字符。 除非使用等宽字体，否则这将是不准确的，但是您应该能够轻松得出平均值。 这成为我最大的容器的宽度。

假设对于给定设备的默认字体大小为16px，您希望字体大小为20px（假设在此示例中，我们使用Droid Serif之类的serif字体）。 这意味着您可以指定类型为1.25rem。 使用这种比例，您将需要一个约675px宽的容器宽度。 这使我们平均可以计数60个字符，这在我们的目标宽度中是正确的。 要指定容器的宽度，只需使用以下代码：

现在，在屏幕宽度超过1140像素的屏幕上，您会将内容分为两列， 行的长度更具可读性。 通常会忽略使用替代字体。 当谈论敏感的排版时，这意味着不同的字体可能无法以不同的大小工作。 这是一种特别真实的显示字体。 这是否意味着您应该避免使用这些字体来设计响应？ 当然不是。 相反，只需为较大或较小布局的各个元素说明不同的字体。 例如，对于台式计算机设计，您可能想要使用字体联盟脚本。 但是，在较小的显示器（例如iPhone）上，您需要将其调大到足以支配内容的位置，否则将很难阅读。

我们所能做的就是将联盟的脚本用于更大的显示器（iPad，台式机等），并切换到更大或更小的显示器主体字体版本（例如 iPhone或其他智能手机）。 为此，您只需要指定以下内容：

结束语虽然响应式设计主要关注图像和整体布局，但字体与这些内容同样重要。 在某种程度上，适应和优化字体的响应设计并不是特别困难。 将相同的时间和精力投入其他设计元素很重要。 保持文本内容的可读性是为访问者创造最佳用户体验的重要部分。

域间网络设计文章推荐：

看完文章，亲们差不多明白一个简单的响应字体了吧，早已在上述文章为大伙儿作出了解读，坚信诸位在看了以后应该可以懂了吧。