Как указать атрибуты шрифта для всех элементов на веб-странице html?

127

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

Должен ли я действительно указывать их десятки раз для любого элемента на моей странице, или есть способ установить их глобально один раз и навсегда?

Как это сделать?

css

— Гордый член
источник

1

Как именно вы сейчас устанавливаете семейство шрифтов, размер ...?

— thecoop

251

* {
 font-size: 100%;
 font-family: Arial;
}

Звездочка означает все элементы.

— Bazzz
источник

15

Это работает, но это не лучшее решение. Когда браузер видит "*", он перебирает все элементы HTML на странице и применяет к ним CSS. Даже для элементов, для которых правило не имеет смысла. В зависимости от размера HTML это может замедлить рендеринг страницы.

— Сезар Канасса

4

Согласитесь, но он применяет CSS ко ВСЕМ элементам, как просил BugAlert. Если кто-то хочет воздействовать на ВСЕ элементы, можно ожидать, что производительность немного снизится. :)

— Bazzz

1

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

— С ..

4

Я знаю, что прошло 5 лет, но я удивлен, что никто до сих пор не заметил: вы никогда не должны указывать только шрифт Windows в "font-family" (если, конечно, это не веб-шрифт) - Arial, helvetica, sans-serif больше совместимы.

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}Наследование шрифтов, и если вы действительно хотите избежать использования переопределений: *,:before,:after{font-family:inherit;}если вы должны использовать универсальный селектор, используйте вместо этого наследование.

— Дарчер 05

18

Если вы используете IE, скорее всего, он вернется к настройкам браузера по умолчанию для определенных элементов, например таблиц. Вы можете противостоять этому с помощью чего-то вроде следующего CSS:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

Изменить: вы можете прочитать о сбросах CSS; видеть темы, подобные этой

— Павел
источник

10

Я не могу переоценить этот совет: используйте таблицу стилей сброса, а затем установите все явно. Это вдвое сократит время разработки кроссбраузерного CSS.

Попробуйте reset.css Эрика Мейера .

— Крис Кокс
источник

Чтобы использовать этот reset.css, нужно ли мне просто привязать таблицу стилей к моей странице или мне нужно ее настроить? Мне в основном нужно иметь одинаковое семейство шрифтов и размер во всех основных браузерах. Помогает ли мне reset.css сделать это по умолчанию?

— Darth Coder

1

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

— Крис Кокс

Спасибо! Я попробовал, и он решил большинство моих проблем. Тем не менее, я все еще вижу разницу в размере шрифта между Chrome и Firefox, несмотря на одинаковые спецификации моей таблицы стилей. Есть идеи по этому поводу? Кроме того, это хорошая практика?

— Darth Coder

8

вы можете установить их в теге body

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
источник

13

Это неточно, потому что большинство браузеров не будут применять этот шрифт к некоторым элементам (элементы не наследуют стиль шрифта)

— travis-146,

@ travis-146 какие браузеры? какие элементы? вы знаете, что есть спецификация, которой должны следовать все браузеры.

— Bamieh 09

@Bamieh - один конкретный пример (который фактически привел меня сюда) в Chrome 72 заключается в том, что он не применяет шрифт к тексту внутри кнопки или меню выбора.

— Ник Сильвестри

2

Если вы укажете атрибуты CSS для своего bodyэлемента, он должен применяться ко всему внутри, <body></body>если вы не переопределите их позже в таблице стилей.

— Тайлер Трит
источник

0

Если вы хотите установить стили для всех элементов в теле, используйте следующий код ^

  body{
    color: green;
    }

— Степан Поперечный
источник