Fuentes de CSS (Fonts)

Las propiedades de fuente CSS le permiten establecer varios estilos para la fuente, como la serie de fuentes del texto, el tamaño y el negrita, la variante, etc.

Atributo de fuente

En el estilo CSS del texto del contenido, como proporcionar varios atributos:fuente-family，fuente-Obtenga más información sobre las combinaciones de fuentes comunes; revise las fuentes seguras de red.，fuente-variant，fuente-pesoyfuente-tamaño. En la sección siguiente se presentarán estos atributos uno por uno.

Serie de fuentes

Lafuente-familyLa propiedad CSS le permite establecer el nombre de la serie de fuentes del contenido del texto, la lista de prioridad de uso de la fuente.

Lafuente-familyLas propiedades pueden contener varios nombres de fuentes comoReservaFuente. Primero enumere la fuente que desea, luego todas las fuentes (si no están disponibles). Si el navegador no admite la primera fuente, intentará con la siguiente. La declaración de la serie de fuentes puede ser como se muestra a continuación:

p　{
　　　　fuente-family: "Times New Roman", Times, serif;
}

"Trebuchet MS"

etc.

A través defuente-Obtenga más información sobre las combinaciones de fuentes comunes; revise las fuentes seguras de red.Estilo de fuente

stylenormal，Nota:Propiedad para establecer el estilo del texto del contenido del elemento.versión oblicua。

Los valores posibles de esta propiedad son:
　　　　fuente-o
}
p.one　{
　　　　fuente-style:　normal;
}
p.two　{
　　　　fuente-style:　italic;
}

Versión inclinada

fuente-tamañoFuente normal.

Tamaño de fuente

Propiedad para establecer el tamaño de la fuente del contenido del texto del elemento.

Hay varias formas de especificar el valor del tamaño de la fuente, por ejemplo, utilizando claves, píxeles o ems.mediano-small，Se puede establecer el tamaño de la fuente en cualquier otro lugar de la página utilizando la clave de tamaño de fuente definida en el elemento body, lo que permite escalar fácilmente la fuente en todo el sitio. Se especifica un tamaño absoluto utilizando una de las siguientes claves:-small，small，Establecer el tamaño de la fuente con claves，x，Se puede establecer el tamaño de la fuente en cualquier otro lugar de la página utilizando la clave de tamaño de fuente definida en el elemento body, lo que permite escalar fácilmente la fuente en todo el sitio. Se especifica un tamaño absoluto utilizando una de las siguientes claves:-x，mediano-x。

xxgrandeEl tamaño relativo se especifica con uno de los siguientes términos:menor。

body　{
　　　　fuente-、、
}
h1　{
　　　　fuente-más grande
}
p　{
　　　　fuente-tamaño:　large;
}

tamaño:　larger;

tamaño:　smaller;12Configurar el tamaño de la fuente con píxeles16al necesitar precisión en píxeles, usar valores en píxeles (por ejemplo,

h1　{
　　　　fuente-tamaño:　24px,
}
p　{
　　　　fuente-tamaño:　14px,
}

px;

Ajustar el tamaño del texto en todos los navegadores. Sin embargo, esta función ajustará el tamaño completo de la página, no solo el texto.

emConfigurar el tamaño de la fuente con Em

emel tamaño del valor es dinámico. La unidad es el tamaño de la fuente del elemento padre.fuente-tamañopropiedad cuando, an emes igual al tamaño de la fuente aplicado al elemento padre.

Sifuente-tamañoEstablecer a en el elemento body como20px, entonces1em=20pxy2em=40px。

Si no ha configurado el tamaño de la fuente en cualquier lugar de la página, es el valor predeterminado del navegador, es16px. Por lo tanto, el valor predeterminado es1em=16pxy2em=32px。

h1　{
　　　　fuente-tamaño:　2em;　　　　/*　32px/16px=2em　*/
}
p　{
　　　　fuente-tamaño:　0.875em;　　　　/*　14px/16px=0.875em　*/
}

Usar una combinación de porcentajes y em

Solución que realiza un efecto similar en todos los navegadoresfuente-tamañoConfigurar el porcentaje predeterminado para el elemento body. Una técnica popular esfuente-tamañoEstablecer el de body62.5%（es decir, predeterminado16px62.5％），igual a10px o 0.625em。

Ahora, puede configurarfuente-tamañoA través de cualquier elemento que utilice la unidad em, se realizará una conversión fácil de recordar,pxA través de10Los valores a través de este método10px=1em，12px=1.2em，14px=1.4em，16px=1.6em，etc. Consulte los siguientes ejemplos:

body　{
　　　　fuente-tamaño:　62.5%;　　　　/*　fuente-tamaño　1em　=　10px　*/
}
p　{
　　　　fuente-tamaño:　1.6em;　　　　/*　1.6em　=　16px　*/
}

Grosor de la fuente

fuente-pesoLa propiedad especifica el grosor o la negrilla de la fuente.

fuente-Los valores posibles del atributo style son:normal，negrita，más grueso，ligero，100，200，300，400，500，600，700，800，900yinherit。

• Numérico100- 900Especificar el grosor de la fuente, donde cada número representa un grosor más oscuro que el anterior.400connormal＆700igualnegrita。

• demás gruesoyligero，y otros valores son valores de peso de fuente absolutos que son relativos al peso de la fuente heredada.

p　{
　　　　fuente-weight:　bold;
}

Debido a que la mayoría de las fuentes solo se pueden usar en pesos limitados. Por lo general, solo se utilizanNormalyVisualización en negrita。Si la fuente no está disponible en el peso especificado, se seleccionará una fuente de reemplazo que sea el peso más cercano disponible.

Variantes de fuente

fuente-variantLa propiedad permite mostrar el texto en una forma de mayúsculas especiales.

Letras mayúsculas y minúsculas oLetras mayúsculas y minúsculasDiferente de las letras mayúsculas comunes, en las letras mayúsculas comunes, las letras minúsculas se muestran como la versión más pequeña de la letra mayúscula correspondiente.

fuente-variantEl valor de la propiedad puede sernormal，small-capsyinherit。

p　{
　　　　fuente-variant:　small-caps;
}