以下文章来自Code Secret Garden，作者ConardLi
一个优质的前端数，基础、框架、算法、项目、面试……总有你想要的。
（启动前端大全，提升前端技能）
代码秘密花园公众号/ConardLi
当您为选择什么字体大小而苦恼时，尤其是当您试图适应不同的屏幕和场景时。回顾网页字体发展的历史变迁，也许会给你带来新的视角。
当我在 2005 左右开始研究 Web 内容时，有两种非常流行的正文字体样式：
10pxVerdana;11pxArial。
这两种样式可能会出现在 90% 的 WindowsXP 以及早期版本的 IE5、IE5.5 和 IE6用户看到的。由于字体提示过多、缺乏字体平滑或子像素渲染，，但字母稍宽，看起来很相似。10pxVerdana 大致等于 10pxVerdana，并且 Verdana 具有更大的 x -height >11pxArial
今天，10px 和 11px 可能看起来微不足道，但在 2000 年代 初期，它们被认为是可读的，原因有两个：
1990 年末和2000早期的800×600和1024×768屏幕像素较大，因此所选择的像素偏小，但并不像今天看起来那么小。设计师和他们的客户习惯于排版（书籍、杂志、传单等）使用
9、10和11点大小，并且使用更大的读者大喊。
由于缺乏 Web 设计经验，图形设计师和营销部门依赖于之前的 QuarkXPress 和 MicrosoftWord 知识。 “如何将传单或杂志广告中使用的字体磅值转换为 HTML 字体大小？”
当然，由于像素没有通用的物理尺寸，因此无法可靠地将打印点转换为像素。屏幕具有不同的每英寸像素比率。本机 Macintosh 屏幕为 72ppi（或 68ppi？）。二十年后的 2004 ，屏幕普遍在 80-90ppi 范围内。几年后，像素变得更小，屏幕通常在 90-120ppi 范围内，而大多数 iPhone 分辨率为 160ppi 。尽管存在常见的误解，但即使在 Retina 过渡开始之前，Web 的分辨率也不是 72ppi。
然而，我们不需要计算出每个设备每英寸的确切分辨率来做出明智的设计选择。尝试一下，应该始终击败 dpi、ppi、Retina 甚至像素数。
2006 年 11 月，Oliver Reichenstein 进行了一个简单的实验：他比较了杂志正文和正常人眼睛与桌面屏幕之间的距离。两者之间的距离很正常，而网站文字的距离则显得小很多。 Oliver 主张将正文副本设置为浏览器的默认值或 100%，这是常规 16px 浏览器中的习惯用法。这在2006年乃至几年后都是一个革命性的主张。网页设计师和客户认为这是极端的。五年后，我们仍然要与 11px 字体的消亡作斗争。
文本太小会花费更多时间来阅读。用户可能需要向屏幕倾斜、将移动设备拉得更近、眯着眼睛或者只是更加集中注意力。作为设计师和开发人员，我们尽量不要求使用或阅读我们作品的人付出额外的努力。
平均而言，在线文本在 2000 年代末和 2010 年代初变得更大——至少在标称像素大小方面是这样。我的猜测是以下原因：
由于
OliverReichenstein的论点，媒体改变了看法。在
iPhone和其他早期智能手机上，10-12px范围内的文本看起来很小（分辨率在150-200ppi范围内）。
我记得网页设计师和开发人员将博客、专业新闻网站和其他客户端项目设置为“更大”尺寸 14-18px 。这种演变渗透到了新闻网站，一个又一个引人注目的重新设计。今天，theguardian.com 的行高为 1.0625rem (17px) 文本，nytimes.com 大约 2017 2019 年的 17pxfont-size 和 26pxline-height，以及 2019 宽屏上的 20pxfont-size code> 和 <代码>30px行高。
这些数字只是一个时间点。早在 2003 年，对于大多数在 800×600 屏幕上关闭字体平滑的用户来说，12pxArial 可能是一个很好的可读选项。这种浏览器默认字体太大的感觉（在 Oliver 的文章于 2006 年发表时非常明显）部分是文化原因，但也是技术原因。同样，出于多种原因，我们认为 16px 对于除较小屏幕之外的所有屏幕来说都非常小。
然后是身体复制的大趋势。 2012 年 4 月，颇具影响力的网页设计师 JeffreyZeldman 重新设计了他的网站，使用 24pxGeorgia 正文副本（每个帖子部分的开头为 32px）。许多设计师同行都感到困惑，有些人抱怨该设计难以阅读，必须在笔记本电脑或台式电脑上缩小尺寸才能舒适地阅读。尽管如此，这种设计一直延续到今天。其他设计师也使用了类似的尺寸，例如，TrentWalton 表示他更喜欢 20–24 像素（或 125–150%）的文本。
这一趋势的最新例子是 JeremyKeith 的 ResilientWebDesign 在线电子书。 Jeremy 使用 CSS Lock 根据视口宽度更改两个边框之间的字体大小：100% 和 250% 。 320 像素（使用默认浏览器设置）时，字体大小为 16 像素。在分辨率为 1600px 时，您将在 40px 处获得文本。显然，这是一种设计选择，我认为（类似于 TrentWalton 所描述的）笔记本电脑和台式机使用的预期效果是让读者向后倾斜并面向屏幕，而不是面向屏幕。这种设计会占用您的时间而不是浏览文本。
虽然这种设计可以在较小的屏幕上（尤其是智能手机和平板电脑，在我的测试中）提供良好的阅读体验，但我发现在较大的屏幕上很难。我的主要问题是：
一次只能看到几行文本。例如，13 英寸笔记本电脑上有 10 行文本。我在阅读时有一定的注意力缺陷，当我尝试滚动时，此设置消除了很多视觉上下文；我通常会尝试通过选择我正在阅读的所有其他段落来解决这个问题，但是当设计一次只显示一两个段落时这没有帮助。
每行文字实际上都很宽，要求读者的眼睛比平常更宽。这可能会产生两个不良影响：读者可能最终会在同一行文本上花费更多精力（例如 3-5 而不是 2-4）；在更极端的情况下，更广泛的眼球运动可能会导致眼睛疲劳或疲劳。
假设有人坐在沙发上，腿上放着一台笔记本电脑，正在阅读一篇文章。假设对于这种人，在这种情况下，他们有自己的偏好和当前的疲劳程度等，因此他们正在阅读的任何文本都有一个理想的字体大小。例如，它可以是 22px。
阅读过程涉及扫视和注视。在每次注视期间（可能持续四分之一秒），他们只能看到聚焦文本的一小部分：
现在，如果相同的文本更大，但其他参数（例如眼屏距离）不变，我猜结果将如下所示：
由于焦点区域保持不变，并且文本更大，我怀疑眼睛在每次注视时都能正确识别更少的字母。这就是为什么我的假设是，对于非常大的文本（例如较大屏幕上的 ResilientWebDesign250% 正文），读者将需要使用更多的注视力来阅读相同的文本，并且可能会降低阅读速度并获得累得更快。我不具备检验该假设所需的技能，但我会对大文本趋势保持警惕。
就我个人而言，我更喜欢对字体大小进行有限的调整。我喜欢在小屏幕上从 100% 开始，然后在较大的手机或平板电脑上使用（例如 110% 或 115%），在笔记本电脑和较大屏幕上使用可能会达到 <代码>125%。然后，根据我使用的字体、我想要的外观以及在各种设备上测试的结果，我调整这些值。
我还对我们一直在追随设备制造商、操作系统和浏览器开发商并试图每两年调整一次字体大小以适应市场这一事实感到难过。根据屏幕宽度稍微增加字体大小的概念很容易引起人们的注意。确保字体大小 100% 可读不是设备的工作吗？
理论上，CSS 像素应该与定义为视角的“参考像素”匹配：
参考像素是设备上一个像素的视角，像素密度为96dpi，与阅读器的距离为一臂长度。因此，一只手臂的标称长度为28英寸，其视角约为0.0213度。在一臂距离处，1px 相当于 0.26 毫米（1/96 英寸）。
但只有硬件制造商、操作系统和浏览器开发商共同合作才能实现这一规则。尤其是硬件供应商对销售针对视频分辨率（1080p、4K）进行优化的屏幕更感兴趣，即使这会让整个UI变得非常糟糕。小的。
理论上，浏览器制造商应该能够更改 16px 的默认字体大小以适应现代设备。但是太多的现有内容依赖于这个默认大小，而这个默认大小不会改变。
所以，我们猜测；我们测试；我们调整：
无论技术上正确还是近似（我自己的计算显示分辨率为
68dpi），72dpi分辨率都允许设计人员轻松将点大小转换为像素大小。由于每英寸有 72 个打印点，因此每个像素恰好是72dpi下的一个点。Retina 显示屏不会更改“每英寸系统点数”分辨率，而是将每个系统点映射到
2×2物理像素的正方形。由于CSSpx单位在这些设备上的工作方式类似于系统点，并且将物理像素分辨率加倍不会影响HTML文本的大小，因此我跳过讨论以物理像素测量的分辨率（例如320ppi）。一种响应式
Web设计技术，可让您随着屏幕变小或变大而在两个属性值之间平滑过渡。
你知道网页字体设置吗？
三分钟迁移AntDesign4
有趣的CSS主题（12）：你应该知道的字体家族
觉得这篇文章对您有帮助吗？请分享给更多人
聚焦“前端大全”，加星提升前端技能
好文章，我正在阅读❤️
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/A%20Brief%20History%20of%20Web%20Typefaces.html
支付宝扫一扫 
评论列表（196条）
测试