2012-04-06 9 views
64

Quiero utilizar una sola fuente llamada "Argelina" en todo mi sitio web. Por lo tanto, tengo que cambiar todas las etiquetas HTML y yo no quiero escribir código diferente para diferentes etiquetas como:Aplicación de una única fuente a un sitio web completo con CSS

button{font-family:Algerian;} 
div{font-family:Algerian;} 

El método escrito a continuación también es sumamente desalentador:

div,button,span,strong{font-family:Algerian;} 
+3

fuente de la familia es un valor heredado, ¿por qué no acaba de definir en el cuerpo? –

+0

Es posible que desee elegir la respuesta de Jukka K. Korpela. Es anterior a la respuesta seleccionada actualmente, durante aproximadamente un mes, y tiene casi el mismo contenido, de todos modos. – okm

+0

posible duplicado de [Cómo aplicar la fuente global a todo el documento HTML] (http://stackoverflow.com/questions/7025756/how-to-apply-global-font-to-whole-html-document) – davidcondrey

Respuesta

68

Coloque el font-family Declaración en un selector de body:

body { 
    font-family: Algerian; 
} 

Todos los elementos de la página heredarán esta fuente familiar a continuación (a menos que, por supuesto, de anulación eso mas tarde).

+8

Un elemento hereda 'font-family' de su elemento primario solo cuando la hoja de estilo * no * establece la familia de fuentes para el elemento. Las hojas de estilo del navegador normalmente establecen la familia de fuentes al menos para los elementos 'input',' textarea', 'code',' tt', y 'pre'. –

+0

Tienes razón. He estado trabajando con restablecimientos de CSS durante tanto tiempo. Olvidé este tipo de cosas :) –

15
* { font-family: Algerian; } 

El selector universal * se refiere a cualquier elemento.

2

Como es probable que estar ya definido por el navegador de elementos de formulario una fuente diferente, aquí hay 2 maneras de usar esta fuente en todas partes:

body, input, textarea { 
    font-family: Algerian; 
} 

body { 
    font-family: Algerian !important; 
} 

Hay todavía tiene una fuente de espacio sencillo en elementos como el pre/code, kbd, etc. pero, en caso de que use estos elementos, será mejor que utilice una fuente monoespacial allí.

Nota importante: si muy poca gente tiene esta fuente instalada en su sistema operativo, se usará la segunda fuente de la lista. Aquí no definió ninguna segunda fuente, por lo que se utilizará la fuente serif predeterminada, y será Times, Times New Roman, excepto tal vez en Linux.
Hay dos opciones allí: use @ font-face si la fuente no tiene uso como fuente descargable o agregue respaldo (s): un segundo, un tercero, etc. y finalmente una familia predeterminada (sans-serif, cursiva (*) , monoespacio o serif). Se usará la primera de la lista que existe en el sistema operativo del usuario.

(*) cursiva predeterminada en Windows es Comic Sans. Excepto si quieres trollear a los usuarios de Windows, no lo hagas :) Esta fuente es terrible excepto para los cumpleaños de tus hijos, donde es bienvenida.

17

Asegúrese de que los dispositivos móviles no va a cambiar el tipo de letra con su fuente predeterminada utilizando importante junto con el selector universales *:

* { font-family: Algerian !important;} 
86
*{font-family:Algerian;} 

hacer como esto

+2

Curiosamente, esto no funciona cuando se utiliza el restablecimiento de CSS de Eric Meyer – ianbeks

+0

¿No aplica eso la familia de fuentes a cada elemento individual? Parece que lo aplicaría a elementos innecesarios (como ) y sería ineficiente. Definitivamente podría estar equivocado, pero he leído que tenga cuidado al aplicar un estilo a todo. –

+0

Dado que la regla universal no es invalidable, no podrá usar una segunda fuente en su sitio. –

-1
*{font-family:Algerian;} 

este html trabajó para mi. Agregado a la configuración del lienzo en wordpress.

Parece genial - gracias!

1

Ok, estaba teniendo este problema donde probé varias opciones diferentes.

La fuente que estoy usando es Ubuntu-LI, creé una carpeta de fuentes en mi directorio de trabajo. bajo la carpeta de fuentes

yo era capaz de aplicarlo ... finalmente aquí está mi código de trabajo

quería que esto se aplica a toda mi página web así que lo puse en la parte superior del documento css.por encima de todas las etiquetas Div (No es que importe, sólo saben que cualquier tipo de letra individuales que se asignan publicar su script tendrán prioridad)

@font-face{ 
    font-family: "Ubuntu-LI"; 
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"), 
    url("../fonts/Ubuntu/Ubuntu-LI.ttf"); 
} 

*{ 
    font-family:"Ubuntu-LI"; 
} 

si yo quería que todos mis etiquetas H1 que ser otra cosa que digamos sans Sarif me gustaría hacer algo como

h1{ 
    font-family: Sans-sarif; 
} 

de cuyo caso sólo mis etiquetas H1 serían la fuente sans-Sarif y el resto de mi página sería la fuente de Ubuntu-LI

0

por favor, coloque este en la cabeza de su (s) página (s) si el "cuerpo" necesita el uso de 1 y la misma fuente:

<style type="text/css"> 
body {font-family:FONT-NAME ; 
    } 
</style> 

Todo entre las etiquetas <body> y </body> tendrá la misma fuente

20

El selector universal de * se refiere a todos los elementos, este css lo hará por usted:

*{ 
    font-family:Algerian; 
} 

Pero, por desgracia si está usando los iconos FontAwesome, o cualquier ícono que requiera su propia familia de fuentes, esto simplemente destruirá los iconos y no mostrarán la vista requerida.

Para evitar esto se puede utilizar el selector :not, una muestra del icono fontawesome es <i class="fa fa-bluetooth"></i>, por lo que simplemente puede utilizar:

*:not(i){ 
    font-family:Algerian; 
} 

esto se aplicará esta familia a todos los elementos en el documento excepción de los elementos con el nombre de la etiqueta <i>, también puede hacerlo por clases:

*:not(.fa){ 
    font-family:Algerian; 
} 

esto se aplicará esta familia a todos los elementos del documento excepto los elementos con la clase "fa", que se refiere a fontawesome defau lt clase, también puede apuntar a más de una clase como esta:

*:not(i):not(.fa):not(.YourClassName){ 
    font-family:Algerian; 
} 
+0

Esta respuesta da un detalle muy necesario según el uso actual de estilo en páginas web debido al uso de iconos de bootstrap (glyphicons) y fuente impresionante – Lakshman

+0

tenga en cuenta que: (no selector) es CSS3 que no es compatible con todos los navegadores. IE 9+ debemos esperar al menos 10 años para que todas las personas de todo el mundo abandonen las familias de IE -9 para siempre: D: '( –

Cuestiones relacionadas