Como aplicar fonte global a todo o documento HTML

175

Eu tenho uma página HTML que inclui algum texto e formatação. Quero que ele tenha a mesma família de fontes e o mesmo tamanho de texto, ignorando toda a formatação interna do texto.

Quero definir um formato de fonte global para a página HTML.

Como posso conseguir isso?

html css font-family

— Docinho
fonte

263

Você deve poder utilizar o asterisco e os !importantelementos no CSS.

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

O asterisco corresponde a tudo (você provavelmente poderia fugir sem o htmlmesmo).

Os !importantgarante que nada pode substituir o que você definiu neste estilo (a menos que também é importante). (isso serve para ajudar com sua exigência de que "ignore a formatação interna do texto" - o que eu entendi como outros estilos não poderiam substituí-los)

O resto do estilo dentro dos aparelhos é como qualquer outro estilo e você pode fazer o que quiser lá. Eu escolhi mudar o tamanho da fonte, cor e família como exemplo.

— Amadiere
fonte

24

O +1 !importanté útil, mas pode ficar um pouco "ser monstros" se for usado em excesso.

— StuperUser

2

+1 por fornecer um ótimo uso de !important. Sempre deve ser usado como última opção.

— dShringi

3

Observe que o uso !importantaqui é devido aos requisitos do pôster original, "tenha a mesma família de fontes e o mesmo tamanho de texto, ignorando toda a formatação interna do texto". Se você não possui esse requisito, não deseja usá-lo !important.

— Seth

1

O uso html * {}ou body * {}o ajudará a evitar a substituição por mais específicas body p {}nas folhas de estilo incluídas. body p {}é mais específico que body {}, portanto, o asterisco é um elemento importante aqui.

— YoYo

1

Eu acho que você pode omitir a htmlpartir html *daqui

— JonnyRaa

44

A melhor prática que eu acho é definir a fonte para o corpo:

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

e se você decidir alterá-lo para algum elemento, ele poderá ser facilmente substituído:

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

— Teneff
fonte

se você estiver usando um framework como o css básico, isso não funcionará sem adicionar! important.

— Petros Kyriakou

16

Coloque-o no seletor de corpo do seu css. Por exemplo

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

— Petecoop
fonte

1

Isso pode ser substituído por seletores mais específicos.

— StuperUser

2

Não se aplicaria a todos os elementos, por exemplo: input type = 'button'

— RRTW 20/07/19

12

Use o seguinte css:

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

O *-selector significa qualquer / todos os elementos, mas obviamente estará na parte inferior da cadeia alimentar quando se trata de substituir mais específicos seletores .

Observe que o !importantsinalizador-fará com que o fontestilo *-seja absoluto, mesmo que outros seletores tenham sido usados para definir o texto (por exemplo, o bodyou talvez a p).

— karllindmark
fonte

1

Talvez !importantimpeça que outros seletores substituam as configurações.

— precisa saber é o seguinte

1

Bem, sim, !importantimpediria que outros seletores substituíssem, desde que eles também não o usassem. Heh. Vou editar meu post e adicioná-lo - obrigado. :-)

— karllindmark

Sim, está certo. Não tenho muita certeza, mas acho que a preferência também depende de onde você coloca a declaração. Se você o colocar na parte inferior, também posso substituir os !importants dos seletores mais específicos acima. Mas isso não é exatamente o ponto aqui eu acho :)

— Quasdunk

Esta é a única resposta que realmente funcionou para mim. Não sei por que, mas fez.

— Peter Gordon

5

Você nunca deve usar * + !important. E se você quiser alterar a fonte em algumas partes do seu documento HTML? Você sempre deve usar o corpo sem importante. Use !importantapenas se não houver outra opção.

— Rakowu
fonte

0

Tente o seguinte:

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

— anglimasS
fonte

Olá anglimass, eu formatei o seu código, se você usar 4 espaços ou o {}botão, poderá exibir o código de exemplo dessa maneira nas suas respostas.

— StuperUser