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

175

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

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

Як я можу цього досягти?

html css font-family

— Sweety
джерело

263

Ви повинні мати можливість використовувати зірочку та !importantелементи в CSS.

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

Зірочка відповідає усьому (ви, ймовірно, могли піти і без того html).

У !importantгарантує , що ніщо не може перевизначити то , що ви встановили в цьому стилі (якщо це не важливо). (це допоможе у вашій вимозі, щоб він "ігнорував внутрішнє форматування тексту" - що я вважав, що інші стилі не можуть перезаписати їх)

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

— Амадьєр
джерело

24

+1 !importantє корисним, але він може отримати трохи "thar be monsters", якщо його надто зловживають.

— StuperUser

2

+1 за надання великого використання !important. Він завжди повинен використовуватися як останній варіант.

— dShringi

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;
}

— Тенеф
джерело

якщо ви використовуєте такий фреймворк, як base css, це не працює без додавання!

— Петрос Кіріако

16

Встановіть його в селекторі тіла вашого css. Напр

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

— Petecoop
джерело

1

Це може бути замінено більш конкретними селекторами.

— StuperUser

2

Це стосується не всіх елементів, наприклад: type type = 'button'

— RRTW

12

Використовуйте наступний css:

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

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

Зауважте, що !important-flag зробить -style fontдля *абсолютним, навіть якщо для вибору тексту використовувались інші селектори (наприклад, bodyа, може, а p).

— karllindmark
джерело

1

Можливо, !importantце не дозволить іншим селекторам змінити настройки.

— Квасдунк

1

Що ж, так, !importantце не дозволить іншим селекторам перевизначити, якщо вони також не використовують його. Хе. Я відредагую свій пост і додаю його - спасибі :-)

— karllindmark

Так, саме так. Не зовсім впевнено, але я думаю, що уподобання також залежить від того, де ви розміщуєте декларацію. Якщо ви розмістите його в самому низу, я також можу змінити значення !importants з більш конкретних селекторів вище. Але це не зовсім суть тут, мабуть :)

— Квасдунк

Це єдина відповідь, яка насправді працювала на мене. Не впевнений чому, але так і було.

— Пітер Гордон

5

Ніколи не слід використовувати * + !important. Що робити, якщо ви хочете змінити шрифт в деяких частинах свого документа HTML? Ви завжди повинні використовувати тіло без важливого. Використовуйте !importantлише якщо немає іншого варіанту.

— Ракову
джерело

1

Спробуйте це:

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

— англімиS
джерело

Привіт anglimass, я відформатував ваш код, якщо ви використовуєте 4 пробіли або {}кнопку, ви можете відображати приклад коду таким чином у своїх відповідях.

— StuperUser