css - Zurb 的 Foundation 4 如何计算 Typography？

Question

我一直在研究大量关于黄金比例和模块化比例的文章，试图从技术层面了解排版的工作原理。我不能说我完全理解它，但我现在对 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;

我的问题；

1. 它们是如何得出这些值的，以及它们在数学上如何相互关联？文档似乎没有具体说明它是如何工作的。

2. 我想将段落字体大小(基线？)更改为 18px (1.125em) 而不是 16px (1em) - 我将如何计算标题元素以便它们是合适的/数学上合理的距离？

3. 我是否可以假设更改标题大小是从选择正文字体大小开始，然后从那里开始计算的？

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

谢谢!

Answer 1

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

这是基金会用来计算它的函数“$em-base”应该给你全局上下文。

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

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

这使您可以判断元素所处的上下文。