Как применить глобальный шрифт ко всему документу 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