Лучшая практика для наследования размера шрифта

работает над преобразованием сайта нашей компании в нечто более отзывчивое, поэтому переработав css, чтобы использовать em вместо проверенного и истинного px.

Проблема, с которой я сталкиваюсь, - наследование font-size, и я ищу лучшие методы для этой проблемы.

Вот как я решаю проблему на данный момент.

jsfiddle для вашего удовольствия от просмотра

HTML

<h3>Heading with a <a href="#">Link</a></h3>

<p>this is a paragraph with a <a href="#">Link</a> inside of it</p>
<a href="#">this is a link outside the paragraph</a>

CSS

body {font:normal 100% sans-serif;}
p {font:normal 1.5em sans-serif; margin-bottom:.5em;}
h3 {font:bold 3em serif; margin-bottom:.5em; }
a:link {font-size:1.5em;}

p a, li a, h1 a, h2 a, h3 a, h4 a, h5 a,
h6 a, dl a, blockquote a, dt a, dd a, td a {
    font-size:1em !important;
}

Я понимаю, что em связаны с родительским font-size. поэтому, если я устанавливаю p{font-size:1.5em;}, а также устанавливаю a:link{font-size:1.5em;}, а мой <a> находится за пределами моего <p>, тогда они будут иметь одинаковый относительный размер, отличный.

Но если я затем поместить <a> внутри <p>, размер шрифта встроенного <a> теперь больше, так как он 1.5em больше, чем <p>. Чтобы преодолеть это, я установил последний стиль со строкой p a, li a, h1 a,......{font-size:1em !important;}. Поскольку a:link имеет более высокую специфичность, чем просто p a, мне пришлось использовать !important (не фанат !important), также я не могу использовать font-size:inherit;, как мы должны поддерживать, осмелюсь сказать, ie6 (все еще есть 15% трафика, мы биотехнологии, а некоторые компании просто отказываются обновляться).

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

Как вы решаете эту проблему в своем собственном css и каким будет подход "наилучшей практики".

Ответ 1

Задайте размер шрифта только для блоков, таких как заголовки и блоки навигации. Изменение шрифта inline вызывает беспорядок, поэтому просто не устанавливайте размер шрифта, например, для ссылок. Вместо этого, при желании, установите размер шрифта ul или div или другого элемента, который содержит ссылки навигации.

Как правило, используйте как можно меньше параметров font-size, чтобы минимизировать риски нежелательных кумулятивных эффектов.

Примечания:

Это не о наследовании вообще. Когда вы устанавливаете font-size для элемента, элемент, конечно, не наследует размер шрифта. Речь идет о влиянии относительной природы единицы em.

Если вы, например, установили a:link{font-size:1.5em;}, вы можете легко переопределить его для ссылок внутри абзацев, не используя !important. Вы просто должны быть более конкретными, и естественным путем здесь будет p a:link{font-size:1em;}.

Ответ 2

Вероятно, вам следует избегать выбора только a и просто добавить для них более специфический селектор, если вы хотите, чтобы они отличались от того, что они наследуют от своих контейнеров. Я никогда не изменяю размер шрифта только для a, а вместо этого изменяю размеры шрифтов в своих контейнерах, когда это необходимо. Аналогичным образом, я избегаю добавления размеров шрифтов для других встроенных элементов (например, span, em, strong) по тем же причинам.

Ответ 3

Я бы предложил использовать таблицу стилей reset, такую как Eric Meyer reset.css, которая установит шрифт для наследования по всем элементам, Затем установите размер шрифта по умолчанию (или "основной" ) в body и используйте относительный блок em, чтобы установить размер шрифта для всех остальных элементов.

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

В редких случаях, когда относительные размеры шрифтов вызывают нежелательное поведение, вы всегда можете это сделать:

p
{
    font-size: 1.5em;
}

a
{
    font-size: 1.5em;
}

p a
{
    font-size: 1em;
}