Zurb's Foundation 4 如何计算排版？答案

【问题标题】：How does Zurb's Foundation 4 calculate Typography?Zurb's Foundation 4 如何计算排版？
【发布时间】：2013-09-14 07:25:53
【问题描述】：

我一直在挖掘大量关于黄金比例和模块化比例的文章，试图了解排版在技术层面上的工作原理。我不能说我完全理解它，但我现在对 Zurb 的 Foundation 4 更加困惑。

在他们的docs 中，他们表示他们不再依赖/使用模块化比例进行排版。所以我很想知道他们是如何得出这些数字的，尤其是在标题元素中。

例如：他们的标题是这样写在他们的 _type.SCSS

中的

$h1-font-size:                         emCalc(44px) !default;
$h2-font-size:                         emCalc(37px) !default;
$h3-font-size:                         emCalc(27px) !default;
$h4-font-size:                         emCalc(23px) !default;
$h5-font-size:                         emCalc(18px) !default;
$h6-font-size:                         1em !default;

// Also...

$paragraph-font-size:                  1em !default;

我的问题；

它们是如何得出这些值的，以及它们如何在数学上相互关联？文档似乎没有具体说明它是如何工作的。
我想将段落字体大小（基线？）更改为 18px (1.125em) 而不是 16px (1em) - 我将如何计算标题元素以便它们是合适的/ 数学上合理的距离？
我是否可以假设更改标题大小始于选择正文字体大小，然后从那里开始计算？

我非常感谢关于这个主题的任何建议，我不是最有数学头脑的人，所以......要温柔。

谢谢！

【问题讨论】：

标签： css responsive-design sass zurb-foundation typography

【解决方案1】：

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

这是 Foundation 用来计算它的函数，“$em-base”应该为您提供全局上下文。

我发现 Zurb 当前方法的一件事是它没有像 em 的级联那样提供足够的功率/足够的灵活性，所以我通常将其修改为：

@function emCalc($target, $context:16) {
    @return $target / $context * 1em;
}

这可以让您知道元素所在的上下文。

【讨论】：

最佳答案。注意 $em-base 变量设置为： $em-base: 16px !default;

【解决方案2】：

字体大小值不一定是数学上的完美计算。作者完全有可能尝试了一些值并认为“这看起来不错”。基于这个article，似乎他们最初使用14px @ 1:1.618, 44px @ 1:1.618并进行了很多舍入，最终决定只使用18px而不是16.807。使用模块化秤很好，但打破它并不违法。

回答您的第二个问题，ems 的优点在于它们是相对的！如果您想按比例缩放所有类型，只需更改正文上的字体大小：

body {
  font-size: 18px;
}

h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

Demo

由于 Foundation 在 ems 中完成所有操作，因此您无需编辑任何变量。

【讨论】：

感谢您非常周到和深思熟虑的回复，这是一个很大的帮助！最初我有点犹豫是否要为 body 添加一个值，因为它会影响网格 - 但在行上添加一个 maxwidth 似乎包含所有内容都很好。再次感谢！
jnowland 在这里有最好的答案。

【解决方案3】：

我们仍然使用模块化比例来确定字体大小，只是不再使用模块化比例ruby gem 以减少依赖关系。 Foundation 4 中的字体大小是使用黄金比例简单地手工计算（然后四舍五入）的，如我们关于 Foundation 3 排版的博客文章中所述（zurb [dot] com/article/1000/foundation-3-0-typography- and-modular-sca)。

从放大正文开始并向上计算是生成字体大小的好方法，但我建议使用双比例方法，如 Tim Brown 的文章 More Meaningful Typography 中所述，因为它不那么极端增加。

【讨论】：

谢谢，埃里克，这真的很有帮助。这仍然是Foundation 5中使用的方法吗？似乎使用了直升像素大小并从中计算出rem，是这样吗？

【解决方案4】：

作者在这篇文章中解释了他们的方法：

http://zurb.com/article/1000/foundation-3-0-typography-and-modular-sca

【讨论】：