¿Cómo especificar los atributos de fuente para todos los elementos en una página web html?

127

Cuando configuro la familia de fuentes, el tamaño de fuente, el color, etc., parece que algunos elementos anidados los anulan con los valores predeterminados del navegador.

¿Debo especificar realmente esas docenas de veces para cualquier tipo de elemento en mi página, o hay una manera de configurarlos globalmente de una vez y para siempre?

¿Como hacer eso?

css

— Miembro orgulloso
fuente

1

¿Cómo exactamente está configurando actualmente la familia de fuentes, el tamaño ...?

— thecoop

251

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

El asterisco implica todos los elementos.

— Bazzz
fuente

15

Esto funciona, pero no es la mejor solución. Cuando el navegador ve el '*', recorre todos los elementos HTML de la página y les aplica el CSS. Incluso para elementos donde la regla no tiene ningún sentido. Dependiendo del tamaño del HTML, esto puede ralentizar el procesamiento de la página.

— Cesar Canassa

44

De acuerdo, pero aplica el CSS a TODOS los elementos, como lo solicitó BugAlert. Si se desea efectuar TODOS los elementos, se puede esperar que el rendimiento se reduzca un poco. :)

— Bazzz

1

También puede agregar! Importante al final de cada declaración de estilo para estar a salvo de otras declaraciones de estilo que superen a esta.

— S ..

44

Sé que han pasado 5 años, pero me sorprende que nadie se haya dado cuenta hasta ahora: nunca debe especificar solo una fuente de Windows en "font-family" (a menos, por supuesto, que sea una fuente web): Arial, helvetica, sans-serif es más compatible.

— rob74

66

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}Las fuentes heredan, y si realmente desea evitar el uso de anulaciones: *,:before,:after{font-family:inherit;}si debe usar un selector universal, use la herencia en su lugar.

— Darcher

18

Si está utilizando IE, es probable que vuelva a los valores predeterminados del navegador para ciertos elementos, como las tablas. Puede contrarrestar eso con algo como el siguiente 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: es posible que desee leer sobre restablecimientos CSS; ver hilos como este

— Pablo
fuente

10

No puedo enfatizar lo suficiente este consejo: use una hoja de estilo de reinicio, luego configure todo explícitamente. Reducirá a la mitad el tiempo de desarrollo de CSS entre navegadores.

Prueba el reset.css de Eric Meyer .

— Chris Cox
fuente

Para usar este reset.css, ¿acabo de vincular la hoja de estilo a mi página o tengo que modificarla? Básicamente, necesito tener la misma familia de fuentes y el mismo tamaño en todos los principales navegadores. ¿El reset.css me ayuda a hacer eso por defecto?

— Darth Coder

1

Tiendo a copiarlo y pegarlo al comienzo de mi hoja de estilo en lugar de vincularlo por separado, guarda una solicitud HTTP. Le ayudará a establecer estilos consistentes en todos los navegadores porque pone a cero todo: los únicos estilos serán los que escriba.

— Chris Cox

¡Gracias! Lo intenté y resolvió la mayoría de mis problemas. Sin embargo, todavía puedo ver una diferencia en el tamaño de fuente entre Chrome y Firefox a pesar de las especificaciones de mi hoja de estilo. ¿Alguna idea sobre esto? Además, ¿es esta una buena práctica?

— Darth Coder

8

puedes ponerlos en la etiqueta del cuerpo

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

— jimplode
fuente

13

Esto no es exacto, porque la mayoría de los navegadores no aplicar este tipo de letra a algunos elementos (los elementos no heredarán el estilo de fuente)

— Travis-146

@ travis-146 ¿qué navegadores? que elementos sabes que hay una especificación que todos los navegadores deben seguir.

— Bamieh

@Bamieh un ejemplo específico (que me trajo aquí, en realidad) en Chrome 72 es que no aplica la fuente al texto dentro de un botón o menú de selección.

— Nick Silvestri

2

Si especifica atributos CSS para su bodyelemento, debería aplicarse a cualquier cosa dentro, <body></body>siempre que no los anule más adelante en la hoja de estilo.

— Tyler Treat
fuente

0

Si desea establecer estilos de todos los elementos en el cuerpo, debe usar el siguiente código ^

  body{
    color: green;
    }

— Stepan Poperechnyi
fuente