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

127

Коли я встановлюю сімейство шрифтів, розмір шрифту, колір і т. Д., Здається, що деякі вкладені елементи переосмислюють їх із некрасивими налаштуваннями браузера.

Повинен я дійсно вказувати ці десятки разів для будь-якого елемента на моїй сторінці, чи є спосіб встановити їх у всьому світі один раз і назавжди?

Як це зробити?

css

— Гордий член
джерело

1

Як саме Ви зараз встановлюєте сімейство шрифтів, розмір ...?

— thecoop

251

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

Зірочка передбачає всі елементи.

— Базз
джерело

15

Це працює, але це не найкраще рішення. Коли браузер бачить "*", він переходить на всі елементи HTML на сторінці та застосовує до них CSS. Навіть для елементів, де правило не має сенсу. Залежно від розміру HTML, це може уповільнити візуалізацію сторінки.

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

4

Погодьтеся, але він застосовує CSS до ВСІХ елементів, як просив BugAlert. Якщо хочеться впливати на ВСІ елементи, можна очікувати, що продуктивність трохи зменшиться. :)

— Bazzz

1

Ви також можете додати! Важливо в кінці кожної декларації стилю, щоб бути захищеною від інших декларацій стилю, що переважують цю.

— С ..

4

Я знаю, що минуло 5 років, але я здивований, що ніхто до цього часу не помітив: ніколи не слід вказувати лише шрифт Windows у "сім'ї шрифтів" (якщо, звичайно, це веб-шрифт) - 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;}якщо вам потрібно використовувати універсальний селектор, замість цього використовуйте спадкування.

— дарчер

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 зробити це за замовчуванням?

— Дарт Кодер

1

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

— Кріс Кокс

Дякую! Я спробував це, і це вирішило більшість моїх проблем. Однак я все ще бачу різницю в розмірі шрифту між Chrome і Firefox, незважаючи на те, що специфікація мого стилю однакова. Будь-які ідеї з цього приводу? Також це хороша практика?

— Дарт Кодер

8

ви можете встановити їх у тезі тіла

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

— jimplode
джерело

13

Це не точно, тому що більшість браузерів не застосовуватиме цей шрифт до деяких елементів (елементи не успадкують стиль шрифту)

— travis-146,

@ travis-146 які браузери? які елементи? ви знаєте, що існує специфіка, яку повинні дотримуватися всі браузери.

— Bamieh

@Bamieh Один конкретний приклад (який насправді привів мене сюди) для Chrome 72 - це те, що він не застосовує шрифт до тексту в межах кнопки або меню вибору.

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

2

Якщо ви вказали атрибути CSS для свого bodyелемента, він повинен застосовуватись до будь-чого в межах, <body></body>якщо ви не перекриєте їх пізніше в таблиці стилів.

— Лікування Тайлера
джерело

0

Якщо ви хочете встановити стилі всіх елементів у тілі, слід використовувати наступний код ^

  body{
    color: green;
    }

— Степан Поперечний
джерело