2011-08-11 13 views
124

Tengo una página HTML que incluye algo de 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.Cómo aplicar la fuente global a todo el documento HTML

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

¿Cómo puedo lograrlo?

Respuesta

188

Usted debe ser capaz de utilizar el asterisco y !important elementos dentro de CSS.

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

El asterisco representa todo (que probablemente podría salirse sin el html también).

El !important asegura que nada puede anular lo que ha establecido en este estilo (a menos que también sea importante). (Esto es para ayudar con su requisito de que debería "ignorar el formato interno del texto", lo que significaría que otros estilos no podrían sobreescribirlos)

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

+14

+1 '! Important' es útil, pero puede ser un poco" thar be monsters "si se usa en exceso. – StuperUser

+10

De acuerdo. Úselo con moderación. Cada vez que se usa, pierde un valor ... – Amadiere

+1

+1 por proporcionar un gran uso de '! Important'. Siempre debe usarse como última opción. – dShringi

9

Utilice el siguiente CSS:

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

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

Tenga en cuenta que la !important -flag hará que el font al estilo de * a ser absoluta, aunque otros selectores se han utilizado para establecer el texto (por ejemplo, el body o tal vez un p).

+1

Tal vez '! Important' podría evitar que otros selectores anulen la configuración. – Quasdunk

+1

Bueno, sí, '! Important' evitaría que otros selectores anularan, siempre y cuando no lo usen. Je. Editaré mi publicación y la agregaré, gracias. :-) – ninetwozero

+0

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 el '! Important's de los selectores más específicos anteriores.Pero ese no es exactamente el punto aquí, supongo :) – Quasdunk

13

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

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

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

+0

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

-1

Prueba esto:

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

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

24

La mejor práctica que creo que es para establecer la fuente al cuerpo:

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

y si decide cambiarlo por algún elemento que podría ser sobreescrito fácilmente:

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

si está utilizando un marco como css de base esto no funciona sin agregar! Important. –

4

Nunca se debe utilizar * + !important. ¿Qué sucede si quiere cambiar la fuente en algunas partes de su documento HTML? Siempre debes usar el cuerpo sin importancia. Use !important solo si no hay otra opción.

+0

Soooo ¿tienes un ejemplo de cómo hacer una fuente global sin usar! Important o *? – MasterProgrammer200

Cuestiones relacionadas