Question

我一直在查看代码和文档，但我似乎无法弄清楚这一点。大多数内容标签的字体大小都是1rem的硬编码，这使得字体大小不可能继承。

这是Foundation的默认CSS： https://github.com/zurb/bower-foundation/blob/master/css/foundation.css#L3481

/* Default paragraph styles */
p {
  font-family: inherit;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility; }

在理想情况下，如果将容器设置为字体大小为20px，则所有内容都应该继承并继续工作 - 这应包括段落，列表，引号，标题应以此为基础大小

这在基金会上没有发生，请参阅JS Bin上的以下代码片段。

http://jsbin.com/muqij/1

我设法完成这项工作的唯一方法是将字体大小重新设计为em并更改容器的大小。

我想相信我在这里遗漏了一些东西。

Answer 1

通常，您不希望继承字体大小，因为它会导致不一致并使设计产生噪音。它也可以在一个大的不灵活的混乱中纠缠你的风格和标记。想象一下每次看起来不同的警报框。

但如果您真的需要这样的行为，可以使用Sass版本编辑settings。

Answer 2

由于Foundation 5鼓励你重置所有的样式，我决定通过使用重置字体大小继承的CSS类来解决这个问题。

我希望我不必使用它，但这是一个很好的解决方法。它从Foundation重用SCSS变量并将所有REM转换为EM。因此，您的字体应根据需要进行相应缩放。

这段代码已在GitHub上作为Gist发布。 https://gist.github.com/neojp/7f6f8e97ba7f0cbf3bd8

// Convert units
// Eg.
//   font-size: convert-unit(16rem, em);
//    >> font-size: 16em;
//
//   font-size: convert-unit(16em, rem);
//    >> font-size: 16rem;
//
//   font-size: convert-unit(16em, px);
//    >> font-size: 16rpx;

@function convert-unit($val, $unit) {
    @return strip-units($val) + $unit;
}


// Bring back font-size inheritance for Foundation 5
// Add this class to the content container and change the font-size accordingly
// Eg.
//   HTML markup
//     <article class="MainContent u-textFormat">
//   Font size with REM assuming html has a default font size of 16px
//     .MainContent { font-size: 1.25rem; }
//   or font size with pixels
//     .MainContent { font-size: 20px; }
// Then all <p> tags would have a font-size of 20px;

.u-textFormat {
    font-size: 1rem;

    h1 {
        font-size: convert-unit($h1-font-size, em);
    }

    h2 {
        font-size: convert-unit($h2-font-size, em);
    }

    h3 {
        font-size: convert-unit($h3-font-size, em);
    }

    h4 {
        font-size: convert-unit($h4-font-size, em);
    }

    h5 {
        font-size: convert-unit($h5-font-size, em);
    }

    h6 {
        font-size: convert-unit($h6-font-size, em);
    }

    p {
        font-size: convert-unit($paragraph-font-size, em);
    }

    ul,
    ol,
    dl {
        font-size: convert-unit($list-font-size, em);
    }

    blockquote cite {
        font-size: convert-unit($blockquote-cite-font-size, em);
    }

    table caption {
        font-size: convert-unit($table-caption-font-size, em);
    }

    table thead tr th,
    table thead tr td {
        font-size: convert-unit($table-head-font-size, em);
    }

    table tfoot tr th,
    table tfoot tr td {
        font-size: convert-unit($table-foot-font-size, em);
    }

    table tr th,
    table tr td {
        font-size: convert-unit($table-row-font-size, em);
    }
}

基础5：更改内容格式的字体大小和字体继承

2 个答案: