13

我知道我们很多人都熟悉将 CSS 中 body 元素的字体大小设置为 62.5%。这意味着 1em 将等于 10px 并有助于保持像素完美，但也允许缩放字体。

那么这是否意味着将其设置为 6.25% 就等于 1em = 1px？似乎是一个更简单的转换，而不必弄乱小数......

多谢你们！我非常了解 em 及其历史（设计学位），但我相信其他人可能会觉得它有帮助:)

至于 1em = 1px，我不认为这是不可取的。em 是正方形的，不管你的单位是什么（无论是点还是像素），没有人会将它们的类型设置为 1px（就像没有人会将打印类型设置为 1pt）。此外，即使您的文章也承认，在大多数数字字体中，大写字母“M”通常小于 1em，并且 em 只是点大小的反映（48pt 字体会为 em 呈现 48pt x 48pt 正方形，12pt类型将产生 12x12 等）

此外，人们这样做的原因更多是为了设置页面上其他元素的尺寸，以便在用户调整字体大小时一切都可以很好地缩放。当然，总会有少数人将默认值设置为 16 像素以外的其他值，但值得为可以很好地缩放的像素完美布局付出的代价。

4

9 回答 9

11

首先，不要假设 1 em 等于 10 像素。em 单位与所使用的排版直接相关。如果某人的字体大小为 16 像素，那么 62.5% 确实是 10 像素（16 * 0.625 = 10），但是当有人修改他们的默认字体大小时，这显然会改变。

其次，这是我第一次听说使用 62.5% 的基体font-size。我总是使用font-size基于Owen Briggs 的 Sane CSS Typography的 76% 。

最后，要回答您的问题，是的，您可以使用 6.25% 的字体大小，然后使用12em而不是1.2em，例如。但是，我强烈反对这种方法。在排版的世界中，一个 em 旨在成为大写字母 'M' 的宽度。这种方法完全违反了这种惯例，并且会严重混淆将来可能维护您的 CSS 的任何人。

于 2008-12-22T23:14:05.810 回答
7

可以说，但是你失去了对规模的控制。不要忘记标题通常会按照它们的排名比例继承这些相同的大小（即<h1>最大，<h2>稍小）。如果要减少这些元素，则需要使用带有大量小数占位符的 em 值。想象一下<h4> font-size: 0.005em。

或者更糟的是，如果你想让字体放大，你可能会看到font-size: 40em一些可笑的东西。

简而言之，1em = 10px 对于字体的缩放值更实用。虽然 1:1 的比例在纸面上可能是有意义的，但它并不适合明智和可维护的 CSS。

于 2008-12-22T23:01:09.003 回答
4

我尝试做同样的事情，但遇到了使用 rems 作为边距和填充的问题。设置font-size为 62.5% 可避免这些问题。

例如，下面的 CSS

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

呈现为：

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

奇怪，对吧？我假设这是由最小字体大小的一些奇怪冲突引起的。

现在，如果你使用font-size: 62.5%另一方面，事情会按预期呈现：

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

呈现为：

p {
  font-size: 1px;
  margin:    1px;
}
于 2014-10-27T15:30:36.173 回答
4

转换可能更简单，但 em 并不意味着它应该意味着什么。

如果给定字体中的大写“M”，则 1em 应该等于宽度。如果字母 M 的宽度为 1 像素，则您的字体将不可读。

http://en.wikipedia.org/wiki/Em_（排版）

于 2008-12-22T23:11:46.547 回答
4

无论如何，整个“62.5%=10px”的东西从根本上被打破了——62.5% 可能是也可能不是 10px，这取决于浏览器、用户的设置，尤其是最小字体大小设置。因此，您不能仅以像素为单位进行设计，然后在假设 62.5%=10px 的情况下“转换”为 em，因为您的设计会一直中断。如果你想要一个像素完美的设计，你必须以像素为单位。如果你想要一个灵活的设计，你需要为网站的不同元素考虑适当的单位 - ems 表示应该与文本大小相关的元素，百分比表示应该相对于窗口大小缩放的元素，以及元素的像素（像图像）根本不应该缩放。

任何在他们的 CSS 中包含 font-size: 62.5% 的人基本上都不了解如何为 Web 设计。

于 2009-11-17T19:07:14.427 回答
4

好问题。

对于自适应/响应式网页设计和弹性模板，我认为 6.25% 是一个有趣的提议。

特别是带有rem单位的字体大小可以根据您的论点自行调整... 1:1 的比例更容易。

rem : "root em"... 根元素的字体大小。 http://www.w3.org/TR/css3-values/

请参阅以下rem示例：http ://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

现在有了你的建议......

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */
body { font-size: 14px; font-size: 14rem; } /* =14px */
h1   { font-size: 24px; font-size: 24rem; } /* =24px */

... 使用我的 JSBin 示例：测试弹性内容的 CSS3“rem”单元

1:1 em 与 px 的比例应该会减少拼写错误。

REM 注释：通过适当的 CSS 重置并在两者中body声明基础，您的样式会优雅地降级...如果支持，并在 之后声明，则应用它的值。否则浏览器会退回到.font-sizepxremrempxpx

确定对rem. 请使用任何/所有浏览器/设备访问此页面... http://ahedg.es/w/rem.html

于 2011-05-02T07:04:25.310 回答
0

您可能会发现这也很有用。http://pixel2em.kleptomac.com 这提供了一个在线像素到 em 转换器，您还可以进行完整的 CSS 文件转换。

于 2010-01-30T17:36:29.500 回答
0

更新版本可在http://pixelconverter.kleptomac.com获得。 它是一个在线单位转换器，用于转换像素、点、em、百分比。这支持从/到任何这些单位的转换。

于 2010-02-16T07:43:02.010 回答
0

对于看到这篇有用帖子的任何人，我想分享一个关于良好网络排版的 youtube 视频（大约 48 分钟）的链接。它是真实的，并为每个人提供了重要的洞察力，从而改变了您为网络设置类型的方式。

我只是根据这个会议视频做了一些细微的改变，所取得的结果甚至被我们的用户认为是令人惊讶的。

演示文稿来自Richard Rutter，演示文稿的链接是Richard Rutter | 网页排版

于 2020-01-27T19:57:14.240 回答