获得所需结果的正确字体大小是多少？答案

【问题标题】：What is the correct font-size to get desired results?获得所需结果的正确字体大小是多少？
【发布时间】：2012-03-26 03:06:52
【问题描述】：

我已经阅读了很多文章，但我不太确定今天什么是正确的。我想正确设置字体大小，但不知道该用什么。

我见过 body { font-size: 100% } 和 body {font-size: 62.5% }。我还读过字体大小应该是 px 或不是 px。

今天正确的做法是什么？如果 IE 6 [过时] 和 7 逐渐过时，将字体设置为通过网站级联的最佳方法是什么？

【问题讨论】：

从可用性/可访问性的角度来看，您不应使用明确的像素值（px 或 pt）。这是因为一些视力不佳的人可能希望增加浏览器中使用的字体大小，如果您已将字体大小锁定为特定的像素值，那么他们就无法做到这一点。 kyleschaeffer.com/best-practices/…
是的，我读到过。然后我阅读了使用 % 作为基础的缺点和 px 作为基础的缺点。我不太确定作为基础开始使用 em 设置其余字体的缺点会更少。（我可能在这里不明白）
您担心哪些具体缺点？
浏览器默认设置、移动视图以及我可能不知道的东西......
@Nanhydrin：有没有办法在不使用 px 的情况下相对于图片合理地调整字体大小？我认为，如果一个人有一张 160 像素宽的图片，并且希望某些文本大约 3.5 行长，那么以像素为单位设置大小将比任何其他单位更可靠。

【解决方案1】：

这在很大程度上取决于您的个人编程风格和偏好。

我自己更喜欢在 em 中设置字体大小。这给了我一个优势，我可以通过更改正文中的一个数字来调整页面中的所有字体大小。

如果您使用 100% 或 62.5% 的字体大小也是个人喜好，具体取决于布局。没有人可以告诉你一个最佳值，因为没有人知道你个人喜欢和想要什么。

【讨论】：

我只是更担心那些将浏览器默认设置为高于正常值的人，以及我将基础设置为什么是否重要。我习惯于直接按像素设置字体，过去我并没有真正设置基础，主要是喜欢它是 font-size { 100% }。
基本大小的 % 问题在于，它是浏览器默认值的 100%。如果你真的需要一个特殊的基本尺寸，你可以将你的身体设置为像素，其余的相对于它的百分比。
将基数设置为 62.5% 和 10px 有区别吗？另外，您是否知道为什么人们会达到 62.5%/20 或类似程度？
你不能说 62.5% 真的是 10px。这取决于浏览器的默认设置。 62.5%/20px 不适用于字体大小。它是字体的简写，意思是 font-size:62.5%;行高：20px;
这在很大程度上取决于您的设计。例如，如果您的导航实现方式与用户放大的比例不同，那么您应该固定导航的字体大小。如果它以同样的方式增长，那么 font-size 也应该增长。

【解决方案2】：

如果你希望你的字体大小是相对的，你应该使用 62.5%（对于 FF 和 IE 中的文本缩放有用）

body {
    font-size: 62.5%;
}
p {
    font-size: 1.2em; /* this is 12pixel */
}

为什么是 62.5%？这是一个适用于所有浏览器的值

【讨论】：

根据我在某处读到的内容，如果有人将浏览器默认大小设置为更小或更大的大小，则 62.5% 可能会出错。这就是为什么我不太确定是否应该使用它。
@AllenTong 这就是你想要的 62.5%。这是为了无障碍（a11y）想想残疾人！它们在浏览器中具有大字体大小作为标准。如果您使用em font-sizes（也适用于宽度和高度）。他们会看到更大的字体。如果您使用pxfont-sizes，他们将始终看到相同的字体。如果您不打扰-> 完全不要使用百分比，坚持使用 px

【解决方案3】：

这不是一个问题，而是更一般的指导方针。这也可以应用于 line-height 属性，这在 IE 中可能非常有问题。作为一名 UI 开发人员，我的工作流程如下：

在 body 上设置一个 Pixel 值，一般为 12px、14px、16px 或 18px。（这将是您的默认设置）。我会非常避免使用百分比作为默认字体大小。我通常还为所有文本在正文元素上设置百分比或基于 EM 的行高。
使用 EM 定义文本的值。您可以将您的一般段落设置为 1.0em，并将您的第一个孩子设置为 1.25em 稍大一些。将标题设置为适当的大小等。这实际上取决于您正在开发的网站以及您的偏好。

请记住，使用 CSS 设置高度后，它会向下层叠。如果您的默认字体高度为 12 px，并且您将所有 div 设置为 1.33em，然后将 div 的子元素设置为 1.25em，那么您将有一个非常奇怪的字体大小......这没有错无论如何，但这不是最佳做法。

通过一些练习，这将使您随时了解您的字体大小，并且在浏览器中运行良好。

同样通过这种做法，对于增加字体大小的视障人士，如果您可以想象所有字体大小都将是基于默认像素大小的百分比，那么所有内容通常都可以很好地扩展。

在正文上声明字体大小后设置 EM 的一个很好的资源是 pxtoem.com。

希望这会有所帮助！

【讨论】：