网站上的小字体答案

【问题标题】：Tiny Fonts on Web Sites网站上的小字体
【发布时间】：2016-02-09 08:16:08
【问题描述】：

我的主要浏览器（FF 和 Chrome）都配置为 12 像素字体。在这两种浏览器中，字体选择器都会显示字体预览，并且它们的大小相同，并且适合阅读网站。我的 IE 不允许我设置字体大小，但似乎默认设置为比 Chrome 大一点。

在我的个人网站上，我使用 XHTML 和 CSS 并将页面字体指定为“中等”，并将该字体大小用于所有主要文本（“内容”文本）。当我在 IE 7、FF 3 和 Chrome 0.4 中查看该网站时，字体按预期显示并与字体选择器匹配（在 IE 中稍大一些除外）。

但是，我访问了几乎所有其他网站（Google、StackOverflow、The DailyWTF、CodingHorror、Microsoft、Sourceforge，甚至 W3C 等），它们全部显示在微小的微型字体 - 我估计是 5 - 7 像素。

在 3 台不同的计算机上是这样，有 2 种不同的操作系统（Vista 和 XP）和 4 种不同的显示器（笔记本电脑、CRT 和全新的 WS LCD）。

那是怎么回事？我是否忽略了一些我需要知道的关于网站设计的基本知识？还是只是所有这些网站都做了一些愚蠢的事情，比如将字体设置为 50%、0.5 em 或 x-small？为什么网站设计者不能尊重我为内容文本选择的字体（我知道侧边栏和页脚等可能相当小或 x-small）。

我很容易认为这只是网站设计人员不知情，但是，见鬼！这些都是一些大牌网站！

编辑：要清楚，我并不是说使用 em 或 % 是愚蠢的，我想知道为什么许多网站似乎使用了我配置大小的 50%。当然，我配置的大小是我希望在其中看到文本的大小。

编辑：来自 W3C 的 CSS 规范：“下表提供了用于将绝对大小映射到 HTML 标题和绝对字体大小的用户代理指南。'medium' 值是用户的首选字体大小并用作参考中间值。" - 强调我的。

有一个共识是，网站的相对字体大小基于典型的浏览器默认值 16 像素，这很不幸，但“这就是生活”。但是其他系统呢？我们可以期望所有浏览器都如此默认吗？

至少我现在明白了这个问题。

在我选择最终答案之前，我想将这个问题留待一段时间，看看其他人是否有不同的看法。

结论：我已将所有浏览器重置为 16px（在我的 125 DPI 机器上为 18px），并将我的网站设置为使用 font-size: 90%。这提供了一个很好的显示尺寸，当然，我最喜欢的所有网站现在都可以阅读了。感谢所有建设性的回答和来回的热闹。

这是一个很棒的社区。p>

【问题讨论】：

顺便说一下，Firefox 和 Opera（可能还有其他浏览器）允许所有网页的最小字体大小，所以如果 10px 对您或您的显示器来说太小了可以达到，比如说，最小 13 像素，同时仍然保持其他一切不变。

标签： html css fonts typography

【解决方案1】：

大多数浏览器 - 如果不是全部 - 将默认字体大小设置为 16 像素。许多网站也使用相对字体大小。如果您的浏览器的字体大小低于此值，这将给您带来问题。

考虑您的浏览器默认字体大小为 16 像素的情况。当网站字体为 1.0em 时，将显示为 16px。不过，其他一些文本可能是 0.7em，所以会更小。但是，如果您的默认浏览器字体大小为 12px，则 1.0em 将是 12px，而 0.7em 将无法读取，因为它太小了。

解决方案是将您的默认浏览器字体大小保持为 16 像素，这样您就可以真实地了解其他人在查看您的网站时所看到的内容。哦，使用相对字体大小是最佳实践，而不是错误。

【讨论】：

网站设计师不应该假设 medium 是我的 preferred 字体大小吗？ CSS 规范当然声明它是。
欢迎艺术家的心血来潮，设计师不是工程师，他们大多数情况下不会考虑实用主义，除非他们是工业设计师，在这种情况下，他们可能甚至不了解字体缩放和只需使用 px。而不是 pt 或 % 或 em。
+1。但是你必须记住，艺术家不是工程师可能是一件好事。有时有一个漂亮的设计很好，但用处不大。无论使用起来多么困难，您都会感觉更好。这就是人类大脑的工作方式：在他的想象和喜欢做的事情之间取得平衡。
@Monkey - 设计者不应假定任何字体大小都是用户的首选大小。这就是为什么您的样式表应将基本字体设置为 100% 或 1em（这将是用户在浏览器中设置的任何值 - 或 Philip 提到的默认 16px）。

【解决方案2】：

在大多数现代浏览器中，%age 允许动态呈现。 Ctrl- 和 Ctrl+ 是你的朋友。

至少大多数开发人员已经意识到设置固定大小的字体是不好的。

【讨论】：

我知道 CTL+ 和 CTL-，但是在我打开的几乎每个选项卡上都必须这样做很烦人。告诉我的浏览器以我选择的大小的 50% 显示主页文本是一件好事吗？

【解决方案3】：

我不在乎字体的大小，只要我能改变它。这就是我讨厌 Flash 网站的最大原因。不久前，我正在查看某家大公司的招聘页面，字体是 TINY。我的本能反应是按 Ctrl-+（在 Firefox 中），但在 flash 中呈现的文本无法调整大小！我立即离开了现场。我的视力不是最好的，所以我需要能够将小文本变大。

我经常遇到的另一个问题是固定宽度的网站。我使用高分辨率显示器（1600x1200、1280x800 或更高），没有什么比一半以上的屏幕空间空白更让我讨厌的了。更糟糕的是，一些网站，当我将字体变大时，固定宽度并没有变大！有一次我试图在将文本放大后阅读一篇文章，并且它有 每行三个单词 并且右侧有大量空白屏幕空间......

【讨论】：

是的，我也经常遇到这种情况。气死我了更让我生气的是，当我每行只剩下 3 个字时，广告占据了其余部分。

【解决方案4】：

Software Monkey 开始与全世界作战。他完全不同意浏览器呈现字体大小的方式、主要网站以及它们设置字体大小的方式，并试图与该线程的每一张海报进行激烈的争论。

我有一个简单的生活准则。当你认为其他人都错了，你可能就错了。

此外，即使您是对的，与周围的世界相处通常更明智，而不是与所有人抗争。

这是一个想法。如果您是一名网页设计师，并且知道超过 99% 的访问者不会修改他们的默认浏览器大小，那么您肯定希望您的网站适合大多数人。这种实用主义解释了当前的情况。

祝你的任务好运。

【讨论】：

我的“任务”是找到我需要在我的网站上做的事情的根源。我应该迎合首选尺寸的记录和规范定义，还是应该迎合浏览器默认值（我发布时没有想到）。
W3C 没有指定相对字体大小是相对于 16pt，他们已经指定它们是相对于用户的首选大小 - 我认为你指出对于大多数用户来说，这是浏览器的默认值 - 并且不幸的是，浏览器默认尺寸过大（而不是 12-14）
@Monkey smashingmagazine.com/2011/10/07/…

【解决方案5】：

我在 Chrome 上遇到过这个问题，但没有达到您所说的程度。然而，有些页面显示的字体非常小，在其他浏览器中看起来还不错。在某些论坛中，每个帖子的字体实际上会变小 - 所以我通常可以阅读第一篇文章，也许可以阅读第二篇，但其余的只是像素:)

【讨论】：

我怀疑博客字体减少的问题是因为他们在 nested div 中包含了带有 font:80% 样式的服务器端响应，而没有意识到 80% 适用到父级的字体大小。

【解决方案6】：

将字体设置为 % 或 em 度量值不是愚蠢的事情，事实上它是 W3C 推荐的！

【讨论】：

阅读我的帖子 - 我并不是说使用 em 或 % 不好。
阅读我的回答，然后再次阅读您的帖子。你暗示使用它们是一件愚蠢的事情：p
字体太小...他们设置为 50%...这看起来很愚蠢。因此，% 不是愚蠢的，而是我首选尺寸的 50% 是愚蠢的。

【解决方案7】：

使用 css 控制字体大小
以 em 表示字体大小
使用作弊码（例如 # , _ ）如果字体呈现不同的浏览器在不同的尺寸上不同浏览器。

【讨论】：

【解决方案8】：

回答您的编辑：原因不言而喻。页面的设计者需要传达一组具有不同属性和不同实际字体大小的信息，这是他可以使用的（最早的）排版和布局工具之一。

作为查看者，您可以为自己定义一个舒适的基线，但如果设计师希望强调或减轻一段文本的重要性，则由他决定，并且 你的好处。你不应该比 #999 或斜体更嫉妒他 50% 的高度。

所有这一切都取决于设计师是否值得他的盐而不是滥用它，这可能会令人遗憾地发生。

【讨论】：

是的，但是为什么要将页面内容的大小设置为我希望查看任何给定页面内容的大小的 1/2。
如果你说像“body”这样的根上的字体大小设置为 50% 是的，这听起来有点辱骂。有大约 80% 或 >100% 的美学论据，但正如所描述的，这听起来不合理。
附录：SO 的基本字体是“100%”，google 的字体是“medium”或“small”，W3 的字体是“inherit”——你可以在 firebug 中看到这一切。问题可能出在你自己身上。
@annakata - 谢谢，我会用萤火虫仔细观察。 FTR，我不知道它是“根”元素的字体大小；我宁愿怀疑是减少了主要文本的字体大小（例如 SO 问题中的
）。
@annakata - 所以将正文字体设置为 80%，所以这是否意味着页面的基本字体从那时起变为浏览器配置的 80%，或者我配置的 9.6pt 12点？实际上，SO 已决定以我喜欢的大小的 80% 显示所有内容，这太小了？？

【解决方案9】：

我想说，由于每个浏览器都有不同的标准，因此字体的呈现模式也会不同。

【讨论】：