Como especificar atributos de fonte para todos os elementos em uma página da web html?

127

Quando defino a família da fonte, o tamanho da fonte, a cor etc., parece que alguns elementos aninhados os substituem por padrões feios do navegador.

Devo realmente especificar essas dezenas de vezes para qualquer tipo de elemento na minha página ou existe uma maneira de defini-las globalmente de uma vez para sempre?

Como fazer isso?

css

— Membro orgulhoso
fonte

1

Como exatamente você está configurando a família da fonte, tamanho ...?

— Thecoop 15/10/10

251

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

O asterisco implica todos os elementos.

— Bazzz
fonte

15

Isso funciona, mas não é a melhor solução. Quando o navegador vê o '*', ele passa por todos os elementos HTML da página e aplica o CSS a eles. Mesmo para elementos em que a regra não faz sentido. Dependendo do tamanho do HTML, isso pode diminuir a renderização da página.

— Cesar Canassa

4

Concordo, mas aplica o CSS a TODOS os elementos, conforme solicitado pelo BugAlert. Se alguém deseja efetuar TODOS os elementos, pode-se esperar que o desempenho diminua um pouco. :)

— Bazzz

1

Você também pode adicionar! Important no final de cada declaração de estilo para estar seguro contra outras declarações de estilo que superem essa.

— S ..

4

Sei que já faz cinco anos, mas estou surpreso que ninguém tenha notado até agora: você nunca deve especificar apenas uma fonte do Windows em "família de fontes" (a menos que seja uma fonte da web) - Arial, helvética, sans-serif é mais compatível.

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}A herança da fonte e, se você realmente deseja evitar substituições, use: *,:before,:after{font-family:inherit;}se você precisar usar um seletor universal, use a herança.

— darcher

18

Se você estiver usando o IE, é provável que ele volte aos padrões do navegador para certos elementos, como tabelas. Você pode combater isso com algo como o seguinte 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;
}

Editar: você pode querer ler sobre redefinições de CSS; veja tópicos como este

— Paulo
fonte

10

Não posso enfatizar esse conselho o suficiente: use uma folha de estilo de redefinição e defina tudo explicitamente. Isso reduzirá o tempo de desenvolvimento de CSS entre navegadores pela metade.

Experimente o reset.css de Eric Meyer .

— Chris Cox
fonte

Para usar este reset.css, basta vincular a folha de estilo à minha página ou preciso ajustá-la? Basicamente, preciso ter a mesma família e tamanho de fonte em todos os principais navegadores. O reset.css me ajuda a fazer isso por padrão?

— Darth Coder

1

Costumo copiá-lo e colá-lo no início da minha folha de estilo, em vez de vinculá-lo separadamente, salva uma solicitação HTTP. Ele ajudará a definir estilos consistentes nos navegadores, porque zera tudo: os únicos estilos serão aqueles que você escrever.

— Chris Cox

Obrigado! Eu tentei e resolveu a maioria dos meus problemas. No entanto, ainda vejo uma diferença no tamanho da fonte entre o Chrome e o Firefox, apesar das especificações da minha folha de estilos. Alguma idéia sobre isso? Além disso, essa é uma boa prática?

— Darth Coder

8

você pode configurá-los na tag body

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

— jimplode
fonte

13

Este não é preciso, porque a maioria dos navegadores não vai aplicar essa fonte para alguns elementos (os elementos não herdarão o font-style)

— travis-146

@ travis-146 que navegadores? quais elementos? você sabe que há uma especificação que todos os navegadores devem seguir.

— Bamieh 9/07

@Bamieh Um exemplo específico (que me trouxe aqui, na verdade) no Chrome 72 é que ele não aplica a fonte ao texto dentro de um botão ou menu selecionado.

— Nick Silvestri

2

Se você especificar atributos CSS para seu bodyelemento, ele deverá ser aplicado a qualquer coisa <body></body>contanto que você não os substitua posteriormente na folha de estilo.

— Tyler Treat
fonte

0

Se você deseja definir estilos de todos os elementos no corpo, use o próximo código ^

  body{
    color: green;
    }

— Stepan Poperechnyi
fonte