5

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

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

例如：这就是他们的标题在_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. 我是否正确假设更改标题大小始于选择正文字体大小然后从那里计算？

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

谢谢！

4

4 回答 4

6 
// 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;
}

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

于 2013-05-28T10:46:51.830 回答
3

字体大小值不一定是数学完美的某种计算。作者完全有可能尝试了一些值并认为“这看起来不错”。根据这篇文章，似乎他们最初使用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;
}

演示

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

于 2013-04-08T14:38:25.803 回答
1

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

从放大正文开始并向上计算是生成字体大小的好方法，尽管我建议使用双比例方法，如 Tim Brown 的文章更有意义的排版中所述，因为它不是极端的增加。

于 2013-09-13T23:25:53.597 回答
0

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

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

于 2013-07-24T21:28:16.670 回答