4

我的要求是，如果开发人员在网页上的任何位置键入一些没有特定标签（<p>等）的文本，则字体大小应与<p>标签的字体大小相同。

在foundation.css我改变了html,body { font-size:0.85 }. 通过此编辑，整个布局（整个站点模板）正在缩小。增加尺寸会导致反之亦然。

有没有其他方法可以安全地将我们自己的默认正文字体大小引入基础而不损害模板？

是否有任何建议可以在不向内容包装 div 引入新的 font-size 属性的情况下实现我的要求？

4

4 回答 4

13

Zurb 使用您在 html, body {} 样式中指定的字体大小来计算网站的宽度。无论您将 font-size 值设置为什么，整个站点都将变为 1em。如果您进一步查看 css，您会发现 .row {} 的定义类似于 max-width: 62.5em。

可以想象，当您减小 1em 的值时，行的 62.5em 值也会变小。我不太了解使用 zurb 的 css 版本对其进行修改，因为我一直使用 sass gem，但您可以调整行宽的 em 数量。

尝试：

所需的站点宽度/以 px 为单位的正文字体大小 = 您的行最大宽度应该是的 em 数。

例如

如果你想要 960 宽度，基本字体大小为 12px

960 / 12 = 80

因此，您可以将行最大宽度设置为 80em。

我相信会有更好的资格的人出现并给出更好的答案，但这就是我理解网格的方式。

于 2013-04-03T08:19:57.153 回答
6

看起来您没有使用 sass，所以这对这个特定的人没有帮助，但如果有人使用 sass，请注意以下基础源代码中的注释components/_variables.scss：

典型的默认浏览器字体大小为 16 像素，用于计算网格。如果您希望基本字体大小不同并且不影响网格断点，请将 $em-base 设置为 $base-font-size 并确保 $base-font-size 是 px 值。

（重点补充）

因此，在您导入任何或所有基础 sass 文件之前，您将编写如下内容：

$base-font-size: 12px;
$em-base: $base-font-size;

注意：上面的“典型的默认浏览器字体大小是 16px”。Foundation 使用 normalize.css，而 normalize 会将其设置为默认值。

于 2013-08-08T22:18:15.927 回答
1

不要修改foundation.css，而是在您自己的“单独”css 文件中定义您自己的样式。例如，如果您这样做：

body {
    font-size: 1.5em;
}

并且具有以下布局，您将看到网格仍然响应您的设备/浏览器的宽度。

<div class="large-12 columns">    
    <div class="row">
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
    </div>
</div>

在此处查看实际操作

于 2013-04-02T01:08:58.903 回答
0

我能想到的最简单的解决方案是在您的内容区域（或整个页面）周围创建一个包装元素并更改字体大小，如下所示：

<div class="content">
<p>My stuff</p>
<a href="#" class="button">A button</a>
</div>

然后在你的 CSS 中：

.content * {
font-size: 90% !important;
}

未经测试，但我相当肯定我过去做过类似的事情。

于 2014-03-07T02:11:00.260 回答