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

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

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

Как я могу этого достичь?

6 ответов


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

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

звездочка соответствует всему (вы, вероятно, могли бы уйти без html тоже).

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

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


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

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

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

h2, h3 {
    font-size: 14px;
}

установите его в селекторе тела вашего css. Е. Г.

body {
    font: 16px Arial, sans-serif;
}

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

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

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

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


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


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

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}