Tamaño De Fuente Javascript

| | | | | | | | | |

La propiedad de tama√±o de fuente de CSS establece el tama√±o de fuente de cualquier elemento de texto en su página o sitio web. La propiedad de tama√±o de fuente se puede aplicar a cualquier clase, ID o elemento que incluya contenido de texto. La propiedad acepta valores en px, em, rem, vw, vh y el uso de palabras clave.

La mayorìa de los desarrolladores usan una combinaciòn de diferentes tama√±os de fuente para dise√±ar una página web. Por ejemplo, un desarrollador web puede usar una fuente grande para los tìtulos y una fuente más peque√±a para el cuerpo del texto y otros. Muchos preguntan: ¿còmo se cambia el tama√±o de fuente en CSS o HTML?

El CSS font-size < La propiedad / code> permite a los desarrolladores establecer el tama√±o de fuente en un párrafo o lìnea de texto en una página web.

Este tutorial analiza, con referencia a ejemplos, còmo usar font-size propiedad. Leer esta guìa le permite ser un experto en cambiar el tama√±o del texto.

CSS font-size

El estilo de fuente apropiado es una parte importante del diseño web . El texto sin estilo causa dificultades de lectura entre los visitantes, lo que casi con certeza resulta en una experiencia desagradable en el sitio web.

Hay muchos estilos CSS para fuentes que se pueden usar para personalizar còmo aparece el texto, como font-weight , font-family , decoraciòn de texto y color . Otra propiedad importante es font-size, que controla el tama√±o de una fuente en un bloque de texto.

La sintaxis de la propiedad CSS font-size es:

sizeValue es el tama√±o de fuente que desea que utilice un bloque de texto. Hay varias formas de especificar el tama√±o de fuente utilizado por un bloque de texto. Los métodos que vamos a discutir en este artìculo son:

  • pìxeles < / li>
  • em
  • root em
  • unidades de ventana gráfica
  • palabras clave

Exploremos un ejemplo de còmo usar cada enfoque de tama√±o de fuente en una página web.

Establecer el tama√±o de fuente usando pìxeles

Una de las formas más comunes de establecer el tama√±o de una fuente es usar pìxeles.

Los pìxeles son una buena unidad de medida porque te permiten ser preciso. La unidad de pìxeles no se ve afectada en gran medida por los sistemas operativos o los navegadores web. Un pìxel en una pantalla es un pìxel en otra. El valor de pìxel que especifique aparecerá aproximadamente de la misma manera en diferentes navegadores.

Sin embargo, el uso de pìxeles para establecer el tama√±o de una fuente en un bloque de texto tiene una limitaciòn: la accesibilidad. Los tama√±os de fuente definidos mediante pìxeles no son accesibles porque algunos navegadores no permiten a los usuarios personalizar el tama√±o de fuente. Los usuarios con discapacidad visual, por ejemplo, pueden tener dificultades para usar un sitio que usa pìxeles para definir tama√±os de fuente.

Digamos que estamos creando un sitio web con un tama√±o de fuente de 28px para todos los elementos "h1" y 12px para todos los elementos "p". Podrìamos usar el siguiente còdigo para realizar esta tarea:

En nuestro còdigo, hemos utilizado un Selector CSS establece el tama√±o de fuente de todos los elementos "h1" en 28px y todos los elementos "p" a 12px. El siguiente fragmento muestra còmo aparecen estos elementos con nuestros nuevos tama√±os de fuente:

Haga clic en ’Imagen botòn en la esquina superior derecha de la ventana de arriba para ejecutar el còdigo.

Otra forma com√∫n de configurar el tama√±o de una fuente en CSS es usar tama√±os de em. La unidad de medida em se refiere al tama√±o de fuente de un elemento principal. Si establece el tama√±o de una fuente en 2em, el tama√±o de fuente será el doble que el del elemento principal.

Un ejemplo de tamaño de fuente CSS con ems

Por ejemplo, suponga que tiene un párrafo de texto almacenado en un cuadro. El tama√±o de fuente del cuadro es 20px. Si especificaste que el tama√±o de fuente del párrafo de texto fuera 1em, el tama√±o de fuente del párrafo serìa 20px. Es el mismo que el tama√±o de fuente del elemento principal.

Si no ha establecido un tama√±o de fuente para un elemento principal, el navegador utilizará el valor predeterminado especificado para ese navegador. Suele ser 16px. Como resultado, si no ha especificado ning√∫n tama√±o de fuente, 1em es de forma predeterminada 16px, 2em es de forma predeterminada 32px .

Supongamos que el tama√±o de fuente de nuestra página web es 16px. Queremos que todos los párrafos de texto aparezcan usando ese tama√±o de fuente, lo que significa que debemos usar el valor 1em. Además, queremos que todos nuestros tìtulos aparezcan con un tama√±o de fuente de 24px, que es igual a 1.5em.

Podrìamos usar el siguiente còdigo para realizar esta tarea:

En nuestro còdigo, el tama√±o de todos los párrafos será 16px (1em = 16px por predeterminado), y todos los elementos "h1" serán 24px (1.5em = 24px).

Asì es como aparecerìa nuestro texto en la página web:

En el ejemplo anterior, puede ver los nuevos estilos para nuestro "h1" y "p" elementos.

< / a>

Debe tener en cuenta que si nuestro "h1" apareciò dentro de un cuadro que tenìa otro tama√±o de fuente, el tama√±o de nuestro "h1" cambiarìa. Esto se debe a que los valores em heredan el tama√±o de fuente de sus padres.

Establecer tamaño de fuente usando Root em

Abreviatura de root em, rem es una nueva unidad de medida introducida en CSS3 que se puede usar para establecer el tama√±o de fuente. Los valores que usan rem son relativos al elemento "html" raìz, en lugar del elemento principal.

Los valores rem son √∫tiles porque le permiten especificar un valor relativo a todo el documento. De esta manera, el tama√±o de su texto no se verá afectado si el el elemento principal tiene un valor em diferente.

Supongamos que tenemos una página web con el tama√±o de fuente predeterminado de 16px. Como en nuestro ejemplo anterior, queremos que todos los "h1" s aparezcan en 24px y que todos los párrafos aparezcan en 16px. Podrìamos establecer estos tama√±os de fuente usando el siguiente còdigo:

Nuestro còdigo es casi el mismo que en nuestro ejemplo anterior. La √∫nica diferencia es que la unidad de medida que usamos es rem en lugar de em. En este ejemplo, nuestros tama√±os de fuente seguirán siendo 24px y 16px para los encabezados y párrafos de nivel superior, respectivamente. Esto se debe a que el tama√±o de fuente predeterminado de nuestra página web es 16px.

Establecer el tamaño de fuente mediante palabras clave

Hay dos tipos de palabras clave que puede utilizar para establecer el tamaño de una fuente en CSS.

Las palabras clave absolutas se utilizan para establecer un tama√±o de fuente que permanece igual, independientemente de los cambios en la página web. Las palabras clave que puede utilizar para establecer un tama√±o de fuente absoluto son las siguientes:

Los valores especificados entre paréntesis se basan en un navegador cuyo tama√±o de fuente predeterminado es 16px.

Palabras clave relativas, en el otro Por otra parte, establezca un tama√±o de fuente que cambiará seg√∫n el tama√±o de fuente en otra parte de la página web. Las palabras clave relativas que puede utilizar son: más peque√±as y más grandes. Estas palabras clave son √∫tiles porque le permiten cambiar el tama√±o de sus fuentes a medida que cambian otros tama√±os de fuente en la página.

Supongamos que queremos establecer el tama√±o de todos los elementos "h2" en una página en 24px (x-large) y todos los "h3 & gt ; elementos a 18px (grande). Podrìamos hacerlo usando este còdigo:

Haga clic en & nbsp; ’Imagen botòn en el editor de còdigo de arriba para ver el resultado de nuestro HTML / Còdigo CSS.

Los tama√±os de fuente para nuestras etiquetas "h2" y "h3" son 24px y 18px, respectivamente. Sin embargo, no especificamos estos tama√±os mediante pìxeles. En su lugar, utilizamos las palabras clave de tama√±o de fuente predeterminadas que ofrece el navegador.

Establecer el tama√±o de fuente mediante unidades de la ventana gráfica

Las unidades de la ventana gráfica se calculan como un porcentaje del tama√±o de la ventana gráfica del navegador. Las dos unidades de ventana gráfica compatibles con CSS son: altura de vista (vh) y ancho de vista (vw).

Debido a que las unidades de ventana gráfica son un porcentaje del El tama√±o de la ventana gráfica del navegador, 1vh es igual al 1% de la altura de la ventana gráfica, por ejemplo. Por lo tanto, si tiene una ventana gráfica de 1000px de ancho, 1vh equivale a 10px.

El uso de unidades de ventana gráfica es √∫til porque el tama√±o de sus fuentes cambiará a medida que cambie el tama√±o de la ventana del navegador. Esto, a su vez, le permite ofrecer una experiencia de usuario más accesible que se adapta a diferentes tama√±os de navegador y dispositivo.

Suponga que quisiéramos crear un sitio cuyos encabezados sean el 4% del ancho de la ventana gráfica y cuyos párrafos son el 1% del ancho de la ventana gráfica. Podrìamos hacerlo usando este còdigo:

Haga clic en el & nbsp; ’Imagen botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.

Si cambia el tama√±o del navegador, el tama√±o de estos encabezados cambiará.

Conclusiòn

La propiedad font-size se usa en CSS (y por lo tanto HTML) para cambiar el tama√±o de las fuentes. Acepta una serie de unidades de medida en las que se pueden mostrar los tama√±os de fuente, incluidos pìxeles, em, rem, palabras clave y unidades de visualizaciòn. Se puede aplicar a ID y clases de CSS , asì como a los elementos mismos.

Este tutorial explica los conceptos básicos del tama√±o de fuente CSS. Ahora está listo para comenzar a usar el atributo font-size como un experto.


Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method