Font de CSS kerning

Una hoja de estilo en cascada, CSS es el código de estilo que consiste en etiquetas que se utilizan para agregar estilo a los contenidos HTML que se crean utilizando las etiquetas HTML. Se sabe que HTML y CSS tienen importancia en la creación y el diseño del front-end de los sitios web. Una hoja CSS contiene varias propiedades que se aplican a cada contenido HTML de manera específica. El contenido básico de HTML es el "texto". Como sabemos, cada vez que vemos cualquier sitio web o página web, los textos siempre están presentes en él en forma de párrafo, encabezado o cualquier enlace.

También hemos visto las letras expandidas de una sola palabra para alinearse con cualquier otra oración por igual. Todo esto se debe a una propiedad CSS relacionada con el texto. Este artículo explicará el texto de contenido HTML y una de las propiedades que necesitamos aplicar al texto que es KERNING.

Introducción a HTML y CSS

Una etiqueta HTML contiene dos secciones: una cabeza y un cuerpo . Todos los contenidos HTML están escritos dentro de la sección del cuerpo de las etiquetas HTML. HTML contiene principalmente contenido que tiene etiquetas de apertura y cierre.

Talking CSS se deriva de sus tres tipos: CSS en línea, interno y externo. El CSS interno se declara en la sección de la cabeza del cuerpo HTML. Su explicación posterior se aplica en el momento de la implementación. Del mismo modo, la propiedad de kerning de fuente se aplica en la etiqueta de estilo de la cabeza. Mientras que el texto se declara dentro de la sección del cuerpo en forma de párrafo o encabezado.

CSS KERNING PROPIEDAD DE FONT

Una fuente kerning es la propiedad relacionada con el texto. Una propiedad de fuente es el estilo de texto que incluye color, estilo de fuente, alineación, etc. Del mismo modo, Kerning es una de las propiedades del texto CSS. Se aplica a las letras de la palabra de cualquier oración. Explica cuánto están espaciadas las letras de una palabra. El valor del kerning puede ser un signo positivo o un signo negativo.

• Valor positivo: Un valor positivo del espacio de letras hace que los caracteres de la letra se extiendan o se expandan más separados. El espacio entre dos letras aumenta por el valor que aplicamos.
• Valor negativo: Un signo negativo con un valor de la separación de la letra acerca al personaje unos a otros minimizando o excluyendo la distancia entre el carácter al carácter igualmente.

Se puede proporcionar un valor de separación de letras en diferentes unidades. Por ejemplo, los valores se dan en píxeles, EM y en una situación normal. Cada unidad tiene un efecto diferente. El valor normal tiene la menor diferencia de espacio en comparación con la fuente sin ningún efecto de kerning. El efecto del valor decimal es más que el valor del dígito. La sintaxis de esta propiedad es la siguiente:

Font-horning: valor;

Aparte del kerning de fuentes, también podemos usar la propiedad de espacios de letras. Ahora, implementamos algunos ejemplos para explicar el concepto de la fuente kerning.

Ejemplo 1: diferencia con y sin kerning

En este ejemplo, utilizamos la propiedad de separación de letras con un valor normal para verificar la diferencia entre los caracteres que no han aplicado el efecto de kerning y aquellos que aplicaron este efecto.

Considere la sección del cuerpo del código HTML. Use una etiqueta de encabezado para declarar un encabezado simple

. Entonces, usa las etiquetas de párrafo. Ambos párrafos se aplican con el nombre de la clase CSS. Estos nombres de clases se declaran dentro de la etiqueta de estilo de la cabeza que se discutirá más adelante.

texto con fuentes kerning.

Del mismo modo, la segunda etiqueta de párrafo también se declara.

En la etiqueta de estilo, utilizamos ambos casos que se declaran en las etiquetas del párrafo. La clase de kerning contiene todas las propiedades relacionadas con la fuente, incluida la propiedad normal de la fuente de fuentes. Esta propiedad de horno de fuentes se refiere al valor de separación de letras que se toma de manera normal. A continuación, la familia de fuentes se aplica como serif y la propiedad de tamaño también se aplica al texto.

.interletrado
Font-horning: normal;
Font-Family: serif;
Tamaño de fuente: 20px;

Mientras que, en la clase preocupante, la propiedad de la fuente de fuentes se toma como ninguno. Esto significa que el texto en este párrafo se declara sin un cambio en el espaciado de las palabras de las palabras.

.sin que no te guste
Noción de fuentes: ninguno;

El resto de las propiedades siguen siendo las mismas.

Guarde el código en el archivo de texto con una extensión HTML. Al hacer esto, veremos que el icono del archivo se cambia en el icono del navegador en lugar del símbolo del editor. Ejecutar ese archivo en el Chrome para ver la salida.

Verá que no hay efecto en el primer párrafo donde utilizamos la propiedad de espaciado de letras o el efecto de horno de fuente como un valor normal. Cuando comparamos el primer párrafo con el segundo párrafo que no tiene ningún efecto de kerning, no encontramos cambios entre ellos.

Ejemplo 2:

Este ejemplo contiene los diferentes valores de la propiedad de separación de letras. En la etiqueta del cuerpo, utilizamos cinco párrafos y cada párrafo se declara con una clase diferente. El nombre de la clase revela el funcionamiento de los valores que se aplican en el momento de la declaración. En cada clase, se usa un valor diferente.

Por ejemplo, usamos el ".Clase de EM-Wray "con un valor de 1EM. Esto hace que el texto sea más amplio que los otros. Mientras que el -0.09EM hace que el texto se vuelva más apretado.

.Em-Tight
Espaciado de letras: -0.09em;

Ahora, guarde el código y veremos el resultado. Todas las líneas se muestran con el espacio de letras diferentes entre ellas. El primer párrafo es el normal. El cuarto párrafo con un valor decimal negativo acercó las letras entre sí.

Ejemplo 3:

Este ejemplo implica la propiedad de la primera línea. Como su nombre indica, la propiedad se implementa en la primera línea. Se aplica un estilo en línea a aquellos que tienen la propiedad de ancho.

La etiqueta de estilo contiene la etiqueta de primera línea del párrafo que muestra que solo se ve afectada la primera línea de ambos párrafos.