Как применить глобальный шрифт ко всему документу HTML

175

У меня есть HTML-страница, которая включает в себя текст и форматирование. Я хочу, чтобы у него было то же семейство шрифтов и тот же размер текста, игнорируя все внутреннее форматирование текста.

Я хочу установить глобальный формат шрифта для страницы HTML.

Как мне этого добиться?

html css font-family конфетка
источник

Ответы:

263

Вы должны быть в состоянии использовать звездочку и !importantэлементы в CSS.

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

Звездочка соответствует всему (вы могли бы уйти без этого htmlтоже).

В !importantгарантирует , что ничто не может переопределить то , что вы установили в этом стиле (если это не важно). (это должно помочь вам с требованием, чтобы оно «игнорировало внутреннее форматирование текста» - что, как я понял, означает, что другие стили не могут их перезаписать)

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

Amadiere
источник
24
+1 !importantполезен, но он может получить немного "thar be monsters", если его чрезмерно использовать.
StuperUser
2
+1 за отличное использование !important. Он всегда должен использоваться как последний вариант.
дШринги
3
Обратите внимание, что использование !importantздесь связано с требованием исходного плаката: «иметь одинаковое семейство шрифтов и одинаковый размер текста, игнорируя все внутреннее форматирование текста». Если у вас нет этого требования, вы не хотите использовать !important.
Сет
1
Использование html * {}или body * {}поможет вам избежать переопределения с помощью более конкретных body p {}включенных таблиц стилей. body p {}более конкретно, чем body {}, поэтому звездочка является важным элементом здесь.
YoYo
1
Я думаю , что вы можете пропустить htmlиз html *здесь
JonnyRaa
44

Лучшая практика, я думаю, это установить шрифт для тела:

body {
    font: normal 10px Verdana, Arial, sans-serif;
}

и если вы решите изменить его для какого-то элемента, он может быть легко переписан:

h2, h3 {
    font-size: 14px;
}
Teneff
источник
Если вы используете фреймворк, такой как Foundation CSS, это не работает без добавления!
Петрос Кириаку
16

Установите его в селекторе тела вашего CSS. Например

body {
    font: 16px Arial, sans-serif;
}
Petecoop
источник
1
Это может быть отменено с помощью более конкретных селекторов.
StuperUser
2
Это не относится ко всем элементам, например: input type = 'button'
RRTW
12

Используйте следующий CSS:

* {
    font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}

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

Обратите внимание, что !important-flag отобразит -style fontдля *абсолютного значения, даже если для установки текста использовались другие селекторы (например, bodyили, может быть, a p).

karllindmark
источник
1
Возможно !important, помешает другим селекторам переопределить настройки.
Quasdunk
1
Что ж, да, !importantэто помешает другим селекторам переопределить, если они также не используют его. Хех. Я отредактирую свой пост и добавлю его - спасибо. :-)
karllindmark
Да, это верно. Не совсем уверен, но я думаю, что предпочтение также зависит от того, где вы размещаете декларацию. Если вы разместите его в самом низу, я также могу переопределить !importants из более конкретных селекторов выше. Но я думаю, что дело не в этом :)
Quasdunk
Это единственный ответ, который действительно работал для меня. Не знаю почему, но это так.
Питер Гордон
5

Вы никогда не должны использовать * + !important. Что если вы хотите изменить шрифт в некоторых частях вашего HTML-документа? Вы должны всегда использовать тело без важного. Используйте !importantтолько если нет другого варианта.

Rakowu
источник
1

Попробуй это:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}
anglimasS
источник
Привет anglimass, я отформатировал ваш код, если вы используете 4 пробела или {}кнопку, вы можете отобразить пример кода таким образом в ваших ответах.
StuperUser