Блог

Я просматривал код и документацию, но, похоже, не могу в этом разобраться. Большинство тегов содержимого имеют жестко заданный размер шрифта до 1rem, что делает невозможным наследование размера шрифта.

Это CSS по умолчанию для Foundation: 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; }
  

В идеальном сценарии, если вы задаете для контейнера размер шрифта 20 пикселей, все содержимое должно наследовать его и продолжать работать оттуда — это должно включать абзацы, списки, кавычки, а заголовки должны использовать этот размер в качестве базового.

Этого не происходит в Foundation, пожалуйста, смотрите Следующий фрагмент кода в JS Bin.

http://jsbin.com/muqij/1

Единственный способ, которым мне удалось выполнить эту работу, — изменить размеры шрифта на em и изменить размер контейнера.

Хотелось бы верить, что я что-то здесь упускаю.

Обычно вы не хотите наследования размера шрифта, потому что это приводит к несогласованности и делает дизайн шумным. Также это может запутать ваши стили и разметку в один большой негибкий беспорядок. Представьте окно предупреждения, которое каждый раз выглядит по-разному.

Но если вам действительно нужно такое поведение, вы можете редактировать настройки с помощью версии Sass.

Поскольку Foundation 5 призывает вас изменять свои стили для всего, я решил исправить это, используя класс CSS, который сбрасывает наследование размера шрифта.

Я бы хотел, чтобы мне не приходилось это использовать, но это хороший обходной путь. Он повторно использует переменные SCSS из Foundation и преобразует все REMS в EMS. Таким образом, ваши шрифты должны соответственно масштабироваться там, где это необходимо.

Этот фрагмент кода был опубликован в качестве основного на GitHub. 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);
    }
}