El Tama o de fuente es uno de los elementos importantes del dise o web, que determina la legibilidad y la usabilidad de una p gina web. En CSS, el Tama o de fuente se establece utilizando la propiedad font-size. Esta propiedad le permite establecer el Tama o de fuente en p xeles, porcentajes, unidades de medida relativas o mediante palabras clave como medium, small, etc.
Por ejemplo, para establecer el Tama o de fuente en p xeles, puede usar la siguiente sintaxis:
selector {
font-size: 16px;
}
Tambi n puede usar unidades de medida relativas como em y rem. Un em es equivalente al Tama o de fuente actual del elemento principal, mientras que rem usa el Tama o de fuente del elemento ra z (generalmente configurado en el navegador).
Puede utilizar varios m todos para cambiar el Tama o de fuente de una p gina web. Por ejemplo, puede aplicar el Tama o de fuente a todos los elementos de un tipo espec fico usando el selector de etiquetas, o cambiar el Tama o solo para un elemento espec fico usando el selector de clase o identificador.
- Establecer el Tama o de fuente CSS
- Determinaci n del Tama o de fuente
- Unidades de Tama o de fuente
- Unidades de medida relativas
- Unidades absolutas
- Establecer el Tama o de fuente en elementos HTML
- Establecer el Tama o de fuente utilizando selectores CSS
Establecer el Tama o de fuente CSS
| Propiedad | Valor | Descripci n |
|---|---|---|
| font-size | valor | Especifica el Tama o de fuente en p xeles, porcentaje, em u otras unidades de medida v lidas. |
| font-size-adjust | n mero | Establece la relaci n de altura de las Fuentes en el elemento en funci n del valor especificado. |
| font-stretch | normal / estrecho / ancho | | Determina el grado de estiramiento o compresi n de la fuente. |
Los siguientes son ejemplos de uso de estas propiedades:
p {
font-size: 16px; / * establecer el Tama o de fuente en p xeles */
font-size: 1em; / * establecer el Tama o de fuente en em (relativo al elemento principal) */
font-size: 100%; / * establecer el Tama o de fuente en porcentaje (en relaci n con el Tama o de fuente por silencio) */
font-size: larger; / * aumentar el Tama o de fuente en un nivel */
font-size: smaller; / * reducir el Tama o de fuente en un nivel */
}
}
h2 {
Adem s de especificar el Tama o de la fuente, tambi n puede utilizar otras propiedades para cambiar su apariencia, por ejemplo, font-weight para especificar el Tama o en negrita o font-style para especificar el estilo (inclinaci n, subrayado, etc.).
Usando diferentes combinaciones de estas propiedades, puede lograr el resultado deseado y crear un dise o de p gina web atractivo y legible.
Determinaci n del Tama o de fuente
El Tama o de fuente de una p gina web juega un papel importante en su presentaci n Visual y en la facilidad de percepci n del contenido por parte del usuario. Para determinar el Tama o de fuente en CSS, se usa la unidad de medida " p xeles "(px) o la unidad de medida relativa" fracciones decimales de magnitud relativa " (em).
La unidad de medida "p xeles" (px) es absoluta y determina el Tama o de fuente en cantidades fijas. Por ejemplo, un valor de "12px" significa que el Tama o de fuente ser de 12 p xeles. Al usar esta unidad de medida, tiene sentido tener en cuenta que la fuente se mostrar de la misma manera en todos los dispositivos y no se escalar seg n la configuraci n del usuario.
- font-size: 16px;
- }
- Tambi n puede utilizar otras unidades de medida, como porcentajes (%), "points" (pt) y otras, para definir el Tama o de fuente con mayor precisi n.
- La elecci n correcta del Tama o de fuente y su unidad de medida le permitir crear una aplicaci n web f cil de Leer o una p gina web que se adaptar a los diferentes dispositivos y configuraciones del usuario.
- Unidades de Tama o de fuente
- Al especificar el Tama o de fuente en CSS, puede usar diferentes unidades de medida. Determinan c mo se medir el Tama o de fuente y, por lo tanto, c mo se ver en la pantalla.
- Estas son algunas de las unidades de Tama o de fuente m s comunes:
P xeles (px): esta es la unidad de medida m s utilizada. Establece el Tama o de fuente en p xeles, con 1 px igual a un p xel en la pantalla. Por ejemplo,
font-size: 16px;
establece un Tama o de fuente de 16 p xeles.
Porcentaje ( % ): esta unidad de medida determina el Tama o de fuente en relaci n con el elemento principal o el contenedor. Por ejemplo, si el elemento principal tiene un Tama o de fuente de 12 p xeles y el Tama o de fuente se establece como
font-size: 150%;
, entonces el Tama o de fuente ser igual a 18 p xeles.
EMS (em): esta es la unidad de medida que determina el Tama o de fuente en relaci n con el Tama o de fuente del elemento principal. Por ejemplo, si el elemento principal tiene un Tama o de fuente de 14 p xeles y el Tama o de fuente se establece como
font-size: 1.2em;
, entonces el Tama o de fuente ser igual a 16.8 p xeles.
Dimensiones relativas: adem s de las unidades de medida anteriores, tambi n puede usar otros valores relativos, como
small
,
medium
,
large
etc. Los valores espec ficos para estas dimensiones relativas son establecidos por el navegador y pueden variar de un navegador a otro.
Al elegir una unidad para el Tama o de fuente en CSS, es importante tener en cuenta que pueden afectar no solo el Tama o del texto, sino tambi n la percepci n del usuario. Por lo tanto, se recomienda elegir las unidades de medida que proporcionen una buena legibilidad del texto y sean m s compatibles con diferentes dispositivos y navegadores.
Unidades de medida relativas
Se pueden usar unidades absolutas y relativas para determinar el Tama o de fuente en CSS. Consideremos con m s detalle las unidades de medida relativas.
- el valor rem del Tama o de fuente se establece en relaci n con el Tama o de fuente del elemento ra z (generalmente una etiqueta ). Por ejemplo, si el Tama o de fuente del elemento ra z se establece en 16 p xeles, el rem con un valor de 2 ser de 32 p xeles.
- vw: el valor del Tama o de fuente se establece en relaci n con el ancho de la ventana gr fica. Por ejemplo, 1vw ser a igual al 1% del ancho de la ventana gr fica.
- Las unidades de medida relativas son especialmente tiles cuando se crean p ginas web adaptables, ya que le permiten adaptar autom ticamente los tama os de fuente a diferentes pantallas y dispositivos.
Unidades absolutas
Las unidades absolutas en CSS le permiten especificar el Tama o de los elementos en una p gina web utilizando valores fijos. Son independientes de otros elementos en la p gina y tienen un valor constante independientemente del contexto.
Hay varias unidades absolutas que se pueden usar en CSS:
P xeles (px): un p xel es la part cula de visualizaci n m s peque a en la pantalla, por lo que los p xeles son la forma m s precisa y confiable de especificar el Tama o de los elementos. Por ejemplo, para establecer un Tama o de fuente de 16 p xeles, puede usar "16px".
P rrafos (pt): un elemento es otra unidad de medida absoluta que se utiliza para especificar el Tama o de fuente. 1 punto equivale a aproximadamente 1/72 de pulgada. El valor de la fuente en los p rrafos se puede establecer, por ejemplo, como"12pt".
Pulgadas (in): una pulgada es una unidad de medida igual a 1/12 de pie o aproximadamente 2.54 cent metros. Si desea especificar el Tama o del elemento en pulgadas, puede utilizar un valor como "2in".
Mil metros (mm): un mil metro es una unidad de medida igual a 1/1000 de un metro o aproximadamente 0.039 pulgadas. Para especificar el Tama o de un elemento en mil metros, puede utilizar un valor como "10mm".
Cent metros (cm): un cent metro es una unidad de medida igual a 1/100 de un metro, o aproximadamente 0.394 pulgadas. Es posible especificar las dimensiones del elemento en cent metros con un valor, por ejemplo, "5cm".
Al usar unidades absolutas, tenga en cuenta que las dimensiones de los elementos pueden mostrarse de manera diferente en diferentes dispositivos y pantallas. Esto se debe a las diferencias en la densidad de p xeles y otros factores.
- En HTML, hay varias formas de establecer el Tama o de fuente en los elementos HTML que nos ayudar n a lograr el efecto Visual deseado.
- font-size: 14px;
- Las unidades relativas tambi n est n disponibles en CSS, que le permiten establecer el Tama o de fuente en relaci n con otros elementos de la p gina. Por ejemplo:
- vw
- el Tama o de fuente se establece como un porcentaje del ancho de la ventana del navegador.