网站上的字体太小了

Question

网站上的字体太小了

3

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

在我的个人网站上，我使用XHTML和CSS，并将页面字体指定为“medium”，并将该字体大小用于所有主要文本（“内容”文本）。当我在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'值是用户首选字体大小，并用作参考中间值。”-我强调。

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

至少现在我理解了问题。

我想暂时保留此问题，以查看其他人是否有不同的观点，然后再选择最终答案。

结论：我已将所有浏览器重置为16px（在我的125 DPI机器上为18px），并将我的网站设置为使用font-size: 90％。这给出了一个良好的显示大小，当然，我所有喜欢的网站现在都可读了。感谢所有建设性的答案和活跃的互动。

这是一个伟大的社区。

- Software Monkey

1

顺便提一下，Firefox和Opera（以及其他浏览器）允许所有网页的最小字体大小，因此如果10px对您或您的显示器来说太小了，您可以将其提高到例如13px最小值，同时保持其他所有内容不变。 - DisgruntledGoat

9个回答

2

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

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

- Unsliced

我知道CTL+和CTL-，但几乎每次打开选项卡都要这样做很烦人。而让浏览器将主页文本显示为我选择大小的50%又有什么好处呢？ - Lawrence Dol

2

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

我经常遇到的另一个问题是固定宽度的网站。我使用高分辨率显示器（1600x1200、1280x800或更高），我最讨厌的事情就是屏幕上有一半以上的空白。更糟糕的是，有些网站，在我将字体放大后，固定宽度并没有变大！有一次，我试图阅读一篇文章，结果每行只有三个单词，右侧有很多空白屏幕...

- user21037

是的，我也经常遇到这个问题。这真让我恼火。更让我恼火的是，当每行只剩下三个单词时，广告却占据了大部分的空间。 - Lawrence Dol

2

软件猴子开始了与整个世界的斗争。他完全不同意浏览器渲染字体大小的方式，主要网站以及它们设置字体大小的方式，并试图与这个帖子的每个发帖人进行激烈争论。

我有一个简单的人生准则。当你认为其他人都是错的时候，你可能并不正确。

此外，即使你是正确的，与其与所有人对抗，往往更明智的做法是跟随周围的世界。

这里有一个想法。如果你是一个网页设计师，并且知道超过99％的访问者不会调整默认的浏览器大小，那么你肯定希望使你的网站看起来适合这个大多数人。这种实用主义解释了当前的情况。

无论如何，祝你在你的探索中好运。

- allesklar

我的"任务"是找到我网站上需要做什么的根本。我应该迎合预定义和规范化的首选大小，还是应该迎合浏览器默认值（当我发布时没有想到）。 - Lawrence Dol

W3C并没有明确规定相对字体大小是相对于16pt，他们指定的是相对于用户首选大小 - 我理解你的观点，对于大多数用户来说，这是浏览器的默认设置 - 不幸的是，浏览器默认设置为过大的字体大小（而不是12-14） - Lawrence Dol

@Monkey http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ - Kevin Boucher

1

我在Chrome上也遇到过这个问题，但没有你所说的那么严重。有些页面显示的字体非常小，在其他浏览器中看起来还好。在一些论坛中，每个帖子的字体实际上会变得更小 - 所以我通常只能阅读第一篇帖子和可能的第二篇，但其余的只是像素 :)

- Torbjørn

我怀疑博客字体变小的问题是因为他们在服务器端使用带有样式font:80％的嵌套 divs包含响应，没有意识到80％适用于父级的字体大小。 - Lawrence Dol

0

将字体设置为百分比或 em 测量单位并不是一件愚蠢的事情，实际上这是 W3C 推荐的！

- Adam

阅读我的帖子 - 我并不是说使用 em 或 % 是不好的。 - Lawrence Dol

阅读我的回答，然后再读一遍你的帖子。你暗示使用它们是愚蠢的事情 :p - adam

字体太小了...他们设置了50%吗...这看起来很愚蠢。因此，百分号并不蠢，而是我的首选大小的50％很蠢。 - Lawrence Dol

0

使用 CSS 来操纵字体大小
使用 em 作为字体大小的单位
如果不同浏览器上字体呈现不同的大小，可以使用作弊码（例如 #、_）来区别不同的浏览器。

- Zenzi

0

回答你的编辑：原因是不言自明的。页面设计师需要传达一组具有不同属性的信息，而变化字体大小的相对大小是排版和布局中最早可用的工具之一。

作为观众，你可以为自己定义一个舒适的基线，但如果设计师希望强调或减弱文本部分的重要性，那就由他决定，这是为了你的利益。你不应该像反对#999或斜体字一样反对50%的高度。

所有这些都取决于设计师是否值得信赖，不滥用它，但不幸的是这种情况确实会发生。

- annakata

是的，但为什么要将页面内容的大小设置为我更喜欢看到任何给定页面内容大小的1/2呢？ - Lawrence Dol

如果你说像“body”这样的根元素的字体大小设置为50％，那么听起来有点过分。虽然有关美学的争论可以支持80％或> 100％，但按照描述来看，这听起来是不合理的。 - annakata

附言：SO的基本字体是“100%”，Google的字体是“medium”或“small”，W3的字体是“inherit”- 你可以在Firebug中查看所有这些。问题可能是你自己的。 - annakata

@annakata - 谢谢，我会使用Firebug仔细检查一下。顺便说一句，我不知道它是“root”元素的字体大小；我更倾向于认为它是主要文本的字体大小（例如，在SO问题中用于<p>）已经缩小了。 - Lawrence Dol

@annakata - SO将页面字体设置为80％，这是否意味着从那时起页面的基础字体变为浏览器配置的80％或从我配置的12pt的9.6pt？实际上，SO已经决定以我喜欢大小的80％来显示所有内容，这很小吗？ - Lawrence Dol

0

我认为由于每个浏览器都有不同的标准，因此字体将会有不同的渲染模式。

- Chicago Web Design

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Toytown Mafia · Accepted Answer

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

假设您的浏览器默认字体大小为16px。当网站字体为1.0em时，它将显示为16px。其他一些文本可能是0.7em，因此会更小。但是，如果您的默认浏览器字体大小为12px，则1.0em将为12px，而0.7em将无法阅读，因为它太小了。

解决方案是保持浏览器默认字体大小为16px，这将为您提供其他人查看您的站点时所看到的真实视图。哦，使用相对字体大小是最佳实践，而不是错误。