¿Cómo utilizar mejor las fuentes en CSS?

Este artículo le presentará un tema simple pero importante que es Fuentes en y también te dará una demostración práctica sobre el tema. En este artículo se cubrirán los siguientes consejos,

• Fuentes en CSS
• Atributos en fuente CSS
• atributo de estilo de fuente
• atributo de peso de fuente
• atributo de tamaño de fuente
• atributo font-family

Los sitios web tienen contenido en forma de imágenes, audio, video y contenido textual. Sin embargo, la mayoría de las páginas web todavía se basan en el texto como formato predominante. Esto se debe a que el texto plano ofrece algunas ventajas muy importantes.

Legibilidad no intrusiva: desea verificar la última puntuación del partido mientras está en la oficina. Obviamente, desea una actualización de texto rápida, ¡no un video ruidoso!
Requisito de ancho de banda de red bajo: el contenido de texto se puede cargar incluso en áreas con poca conectividad a Internet, mientras que los medios enriquecidos no.
Fácil de buscar: los sitios web siempre controlan la facilidad con la que su contenido se nota en los motores de búsqueda. El texto es el más adecuado para esto, ¡al menos hasta que la IA se apodere de Internet por completo!

Al formatear el contenido del texto, los diseñadores web solo tienen unos pocos parámetros en los que trabajar: fuente, alineación, resaltado y color. Seleccionar la fuente correcta para su texto es una elección fundamental. La práctica estándar es utilizar etiquetas de fuente CSS para definir fuentes para texto en páginas HTML.
Si eres nuevo en el mundo de la programación HTML, haz un recorrido básico aquí. Es posible que desee leer sobre los conceptos básicos de CSS antes de comenzar a aprender sobre las fuentes CSS.

Para obtener un tutorial completo de CSS, visite Edureka CSS Tutorial For Beginners. Obtendrá un excelente aviso sobre la forma en que se utilizará CSS para aumentar el diseño web HTML.

Continuando con este artículo sobre fuentes en CSS

Fuentes en CSS

Una fuente es básicamente un conjunto de características asociadas con la visualización de texto. Las fuentes se diferencian entre sí por su tamaño, sangría, ancho, inclinación, etc. Comencemos con una visualización de texto básica en diferentes fuentes.

Ejemplo 1: títulos y párrafos en varias fuentes

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
El párrafo en cursiva, negrita, fuente Georgia
 

 Ejemplo 1: Salida 

pila y montón en java

En el Ejemplo 1, tenemos 3 líneas de texto diferentes en diferentes fuentes. Notaría que cada una de las fuentes varía en el ancho de sus caracteres, sangrías, etc.

Continuando con este artículo sobre fuentes en CSS

Atributos en fuente CSS

Las fuentes CSS tienen 4 atributos principales: estilo, peso, tamaño y familia. El atributo de estilo denota normal o cursiva. El peso muestra la fuente como simple o en negrita. El peso también se puede expresar numéricamente. El tamaño es simplemente el tamaño de la fuente, mayor es el tamaño, mayor es la apariencia del texto. Hay varias formas en las que se puede asignar el tamaño de la fuente; se dan descripciones detalladas en secciones posteriores. El atributo de familia consiste en asignar el nombre de la fuente al texto.

En el Ejemplo 1, hemos utilizado diferentes nombres de fuente para los encabezados y el párrafo. Bajo las etiquetas h1 y p, vemos dos nombres de fuente listados, mientras que la etiqueta h2 nombra solo una fuente. Esta es la definición de una familia de fuentes, más sobre esto más adelante.

Continuando con este artículo sobre fuentes en CSS

atributo de estilo de fuente:

Los dos estilos principales que se pueden configurar son 'normal' y 'cursiva'. Se supone que las cursivas son de naturaleza cursiva con una inclinación. Normal es la opción predeterminada que es recta. Hay otra opción menos utilizada llamada 'oblicua', que se parece a la opción de cursiva en la mayoría de las fuentes. También puede configurar el estilo para 'heredar' para que tome el estilo de fuente de su elemento principal.

Continuando con este artículo sobre fuentes en CSS

atributo de peso de fuente:

Este atributo decide si la fuente debe aparecer gruesa o fina. Se puede configurar como 'normal' o 'negrita'. El valor predeterminado es normal. Este valor también se puede establecer como numérico. El peso de 400 representa normal y 700 es de negrita. Hay algunas otras configuraciones (que van desde 100 - muy claro a 900 - muy audaz), pero no todas las fuentes las admiten. Todas las opciones de peso se muestran en el Ejemplo 3.

Continuando con este artículo sobre fuentes en CSS

atributo de tamaño de fuente:

El atributo de tamaño se puede configurar de varias formas. Enumeremos estas formas a continuación.
● Valor enumerado, como 'mediano', 'grande'. De hecho, al igual que las tallas de ropa, los valores pueden oscilar entre XX Small y XX Large.
● Establecer en relación con su elemento principal, como 'más grande' o 'más pequeño'.
● Porcentaje del tamaño del elemento principal.
● Establecer como 'heredar' para adoptar directamente el tamaño del elemento principal.
● Como valor absoluto en unidades de px (píxeles), pt (puntos) o cm (centímetro).
'Medio' es el valor predeterminado establecido para este parámetro.

Continuando con este artículo sobre fuentes en CSS

atributo de familia de fuentes:

En HTML, la familia de fuentes CSS es para configurar el nombre de la fuente. Puede poner un solo nombre de fuente con la etiqueta. O puede asignar varios valores como una lista de familias de fuentes que define la prioridad en la que el navegador debe elegir la fuente.
La lista se prioriza de izquierda a derecha, en forma de un sistema alternativo. Se elige el primer valor, si está disponible, o el control pasa al siguiente, hasta llegar al final de la lista. La familia de fuentes predeterminada está definida por las preferencias del navegador.
Las familias de fuentes CSS son de 2 tipos: familias genéricas y familias de fuentes.
● Familias genéricas: en función de algunas características generales, las fuentes se agrupan como 'serif', 'sans serif', 'monospace', etc. Por ejemplo, Sans serif significa fuentes sin el estilo serif.
● Nombres de familia: fuentes que pertenecen a jerarquías familiares específicas. Times, Arial, Courier son todas familias de fuentes y Times New Roman es un ejemplo de fuente de la familia Times.
Las diversas opciones de uso de familias de fuentes se enumeran en el Ejemplo 4 a continuación.

Algunos puntos comunes a tener en cuenta

● Como muchas otras propiedades de CSS, algunas de las configuraciones de fuente varían en diferentes navegadores. Verifique la compatibilidad del navegador antes de usar algunas configuraciones de fuente poco comunes.
● Puede establecer la configuración de fuente por separado usando las etiquetas individuales de estilo de fuente, peso de fuente, etc. Alternativamente, si prefiere el código compacto, puede usar el atributo de fuente abreviado con todos los valores en la misma línea.
● En situaciones de usuario en las que desea que el tamaño de la fuente varíe según el tamaño del navegador, existe una configuración de tamaño de fuente útil llamada configuración de fuente receptiva. Se puede configurar con una unidad vw, que significa 'ancho de ventana'. De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador.

Espero que haya encontrado la información que buscaba en Fuentes en CSS. Comparta su experiencia con nosotros en la sección de comentarios a continuación. ¡Feliz diseño!

Si está interesado en obtener más información sobre el desarrollo web, consulte la por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender cómo crear sitios web impresionantes utilizando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google, e implementarlo en Amazon Simple Storage Service (S3).