Cómo aplicar una fuente global a todo el documento HTML

175

Tengo una página HTML que incluye texto y formato. Quiero que tenga la misma familia de fuentes y el mismo tamaño de texto, ignorando todo el formato interno del texto.

Quiero establecer un formato de fuente global para la página HTML.

¿Cómo puedo conseguir esto?

html css font-family

— Cariño
fuente

263

Debería poder utilizar el asterisco y los !importantelementos dentro de CSS.

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

El asterisco coincide con todo (probablemente también podrías escapar sin él html).

Esto !importantasegura que nada pueda anular lo que ha configurado en este estilo (a menos que también sea importante). (Esto es para ayudarlo con su requisito de que debe "ignorar el formato interno del texto", lo que entendí que otros estilos no podrían sobrescribir estos)

El resto del estilo dentro de las llaves es como cualquier otro estilo y puedes hacer lo que quieras allí. Elegí cambiar el tamaño de fuente, el color y la familia como ejemplo.

— Amadiere
fuente

24

+1 !importantes útil, pero puede ser un poco "que sean monstruos" si se usa en exceso.

— StuperUser

2

+1 por proporcionar un gran uso de !important. Siempre debe usarse como última opción.

— dShringi

3

Tenga en cuenta que el uso de !importantaquí se debe al requisito del póster original, "tener la misma familia de fuentes y el mismo tamaño de texto, ignorando todo el formato interno del texto". Si no tiene ese requisito, no desea usarlo !important.

— Seth

1

El uso de html * {}o body * {}le ayudará a evitar la anulación a través de más específicos body p {}en las hojas de estilo incluidas. body p {}es más específico que body {}, por lo que el asterisco es un elemento importante aquí.

— YoYo

1

Creo que puedes omitir htmldesde html *aquí

— JonnyRaa

44

La mejor práctica, creo, es establecer la fuente en el cuerpo:

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

y si decides cambiarlo por algún elemento, podría sobrescribirse fácilmente:

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

— Teneff
fuente

Si está utilizando un marco como Foundation CSS, esto no funciona sin agregar! Importante.

— Petros Kyriakou

16

Ajústelo en el selector de cuerpo de su CSS. P.ej

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

— Petecoop
fuente

1

Esto se puede anular con selectores más específicos.

— StuperUser

2

No se aplicaría a todos los elementos, por ejemplo: input type = 'button'

— RRTW

12

Use el siguiente CSS:

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

El *-selector significa cualquiera / todos los elementos, pero obviamente estará en la parte inferior de la cadena alimentaria cuando se trata de anular selectores más específicos .

Tenga en cuenta que la !importantbandera representará el fontestilo para *que sea absoluto, incluso si se han utilizado otros selectores para establecer el texto (por ejemplo, el bodyo tal vez a p).

— karllindmark
fuente

1

Tal vez !importantevitaría que otros selectores anulen la configuración.

— Cuasdunk

1

Bueno, sí, !importantevitaría que otros selectores se anulen, siempre que no lo usen. Je Editaré mi publicación y la agregaré, gracias. :-)

— karllindmark

Sí, eso es correcto. No estoy seguro, pero creo que la preferencia también depende de dónde coloque la declaración. Si lo coloca en la parte inferior, también puedo anular los !importants de los selectores más específicos de arriba. Pero ese no es el punto aquí, supongo :)

— Quasdunk

Esta es la única respuesta que realmente funcionó para mí. No estoy seguro de por qué, pero lo hizo.

— Peter Gordon

5

Nunca deberías usar * + !important. ¿Qué sucede si desea cambiar la fuente en algunas partes de su documento HTML? Siempre debes usar el cuerpo sin importancia. Use !importantsolo si no hay otra opción.

— Rakowu
fuente

1

Prueba esto:

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

— angulos
fuente

Hola anglimass, he formateado tu código, si usas 4 espacios o el {}botón puedes mostrar código de ejemplo de esta manera en tus respuestas.

— StuperUser