En CSS, hojas de estilo en cascada, hay una variedad de Fuentes que se pueden usar para dise ar texto en una p gina web. El conocimiento de los diferentes tipos de Fuentes y su soporte en los navegadores le permite crear textos hermosos y legibles en el sitio.
Uno de los tipos de fuente m s comunes son las Fuentes serif (Serif). Su principal ventaja es que generalmente se consideran m s formales y son ideales para materiales impresos. Algunas Fuentes serif populares incluyen Times New Roman, Georgia y Courier New.
El segundo tipo de fuente es sans serif. Se diferencian de las Fuentes serif en que carecen de elementos decorativos adicionales en los extremos de los caracteres. Esto los hace m s grandes y f ciles de Leer en p ginas web. Algunos ejemplos comunes de Fuentes sans-serif incluyen Arial, Verdana y Helvetica.
Adem s de las Fuentes serif y sans-serif, tambi n hay Fuentes decorativas (Decorative Fonts) y Fuentes monoespaciadas (Monospaced Fonts). Las Fuentes decorativas se usan com nmente para crear efectos y resaltar texto, y las Fuentes monoespaciadas funcionan bien para el dise o de c digo o texto, donde es importante mantener un ancho de car cter constante.
En este art culo, le daremos una lista completa de los diferentes tipos de Fuentes compatibles con CSS, as como ejemplos de c mo usar cada uno de ellos. Podr elegir la fuente adecuada para su proyecto en funci n de sus caracter sticas y apariencia.
- Clasificaci n de Fuentes en CSS
- Descripci n general de las familias de Fuentes
- Fuentes monoespaciadas en CSS
- Fuentes libres en CSS
- Fuentes web en CSS
- Especificar una lista de Fuentes en CSS
- Ejemplos de Fuentes en CSS
Clasificaci n de Fuentes en CSS
Las Fuentes en CSS se pueden clasificar seg n diferentes par metros, como las Fuentes serif, serif y sin serif, as como su origen del sistema o del usuario.
Por kegl:
Las Fuentes pueden ser de diferentes tama os, que se definen con el PIN especificado en CSS. Normalmente se utilizan valores en p xeles (px), pero tambi n se pueden especificar en porcentaje ( % ) y en otras unidades de medida.
Fuentes serifas y sin serifas:
Las Fuentes serif tienen peque os elementos adicionales (serifs o trazos) en los extremos de las letras, lo que hace que el texto sea m s formal y tradicional. Las Fuentes sin caracteres no tienen tales elementos adicionales, lo que hace que el texto sea m s moderno e informal.
Fuentes del sistema y personalizadas:
Las Fuentes del sistema son Fuentes que est n instaladas en el sistema operativo de una computadora. Estas son las Fuentes que generalmente usan el navegador predeterminado y est n disponibles para todos los usuarios. Las Fuentes personalizadas son Fuentes que se cargan desde el servidor o se agregan a un archivo CSS mediante la regla @font-face. Esto le permite usar Fuentes no est ndar que no est n disponibles en todos los dispositivos.
Descripci n general de las familias de Fuentes
- Serif serif) son Fuentes cl sicas que tienen serif en los extremos de las letras. Por lo general, se usan para texto en materiales impresos, como libros y peri dicos. Ejemplos: Times New Roman, Georgia, Courier.
- Sans-serif sans serif) - estas Fuentes no tienen serif en los extremos de las letras. Son muy legibles tanto en pantalla como en productos impresos. Ejemplos: Arial, Helvetica, Verdana.
- Monospace (monoespaciado): en las Fuentes monoespaciadas, cada letra ocupa el mismo ancho, lo que las hace ideales para crear tablas o Mostrar c digo. Ejemplos: Courier New, Consolas, Monaco.
- Cursiva (cursiva): estas Fuentes imitan el estilo de escritura a mano. Le dan al texto un aspecto rom ntico o elegante. Ejemplos: Brush Script, Lucida Handwriting, Segoe Script.
- Fantasy (fantas a) estas son Fuentes con un dise o poco convencional, a menudo se utilizan para crear t tulos o acentuar. Ejemplos: Impact, Jokerman, Papyrus.
Al elegir Fuentes para su p gina web, tambi n tenga en cuenta que estas familias pueden tener diferentes opciones de dise o (negrita, cursiva, etc.) que se pueden usar para crear combinaciones llamativas.
Fuentes monoespaciadas en CSS
Hay varias Fuentes monoespaciadas en CSS que son compatibles con casi todos los navegadores modernos. Algunos de ellos son:
- - esta es una fuente monoespaciada est ndar proporcionada por el navegador. Por lo general, tiene una guarnici n y un espaciado uniforme entre los caracteres;
- - esta es una fuente monoespaciada conocida que a menudo se usa para Mostrar c digo. Tiene opciones de grasa y baja en grasa y se puede instalar en la mayor a de los sistemas operativos;
- es una fuente monoespaciada desarrollada por Microsoft. Tambi n se usa a menudo para Mostrar c digo y tiene un aspecto muy limpio y n tido;
- - esta es una de las Fuentes monoespaciadas m s comunes. Tiene un excelente equilibrio entre el ancho de los caracteres y la legibilidad;
- - es una fuente monoespaciada que se utiliza en el entorno de desarrollo de Xcode. Tambi n se puede utilizar para Mostrar el c digo y tiene una calidad de visualizaci n muy alta en la pantalla.
. puedes escribir el siguiente c digo CSS:
code {
En este ejemplo, especificamos que el texto colocado en la etiqueta
debe mostrarse en la fuente
Courier
o cualquier otra fuente monoespaciada.
Al usar Fuentes monoespaciadas, puede crear f cilmente bloques legibles y estructurados de c digo u otros textos en su sitio web.
Fuentes libres en CSS
1. Google Fonts:
Google Fonts ofrece una amplia selecci n de Fuentes gratuitas que se pueden utilizar en proyectos web. Para utilizar las Fuentes de Google Fonts, debe conectar el c digo correspondiente en la secci n de la p gina:
Aqu , en lugar de "NOMBRE_SHRIFT", se indica el nombre de la fuente seleccionada. Despu s de eso, la fuente se puede aplicar a los elementos a trav s de la propiedad CSS "font-family".
2. Font Squirrel:
Font Squirrel tambi n ofrece Fuentes gratuitas para el desarrollo web. Si selecciona una fuente en el sitio web de Font Squirrel, puede descargarla en formato TTF (TrueType Font) o EOT (Embedded OpenType). Una vez descargado, la fuente se puede conectar a la p gina web a trav s de la regla CSS:
@font-face {
font-family: NOMBRE_RIFT;
src: url ('ruta de acceso');
}
- Aqu , en lugar de "NOMBRE_CHRIFT", se indica el nombre de la fuente seleccionada, y en lugar de "path_k_archivo", la ruta del archivo de fuente en el servidor.
- El uso de Fuentes gratuitas permite a los desarrolladores crear dise os nicos para proyectos web sin tener que pagar tarifas de licencia por el uso de Fuentes comerciales.
- Fuentes web en CSS
Para usar Fuentes web en CSS, siga estos pasos::
Elija una fuente web adecuada que coincida con el dise o concebido.
Conecte la fuente web seleccionada a la p gina web mediante la regla @font-face.
Aplicar la fuente web seleccionada a los elementos deseados en CSS.
Las Fuentes web se conectan mediante la regla @font-face. Para ello, debe especificar la direcci n URL de la fuente, su formato y par metros adicionales. Ejemplo de uso de la regla @font-face:
@font-face {
url('webfont.woff') format('woff');
Despu s de conectar una fuente web, puede aplicarla a los elementos deseados mediante la propiedad font-family. Ejemplo de fuente web:
Especificar una lista de Fuentes en CSS
Para especificar una lista de Fuentes en CSS, se utiliza la propiedad
font-family
. Utilice esta propiedad para especificar una o m s Fuentes que se utilizar n para Mostrar el texto.
Sintaxis de uso de propiedades
font-family
siguiente:
font-family: font1, font2,..., fontn;
Aqu
fonta1
,
fonta2
| , , | fontn |
|---|---|
- estos son los nombres de las Fuentes que deben estar disponibles en la computadora del usuario. Si no se encuentra ninguna fuente, se usar la siguiente fuente de la lista. | Ejemplos de Fuentes especificadas: |
font-family: Arial, sans-serif; | En este ejemplo, se utilizar la fuente Arial, si est disponible en el equipo del usuario, o cualquier otra fuente sans-serif (sans-serif). |
font-family: "Times New Roman", Times, serif; | Este ejemplo utilizar la fuente Times New Roman si est disponible en la computadora del usuario, la fuente Times si no se encuentra Times New Roman o cualquier otra fuente serif (serif). |
Es importante tener en cuenta que si el nombre de la fuente contiene espacios o caracteres especiales, debe estar entre comillas dobles. Por ejemplo: | font-family: "Courier New", monospace; |
En este ejemplo, se utilizar Courier New si est disponible en el equipo del usuario o cualquier otra fuente monoespaciada sans-serif (monospace). | Al especificar una lista de Fuentes, se recomienda especificar Fuentes de prop sito general, como Arial, Times New Roman o Courier New, especificando la metafamilia de Fuentes (sans-serif, serif, monospace, etc.). Esto permitir que el navegador elija la fuente m s adecuada seg n el sistema operativo y la configuraci n del usuario. |
Ejemplo
Descripci n
font-family: Arial, sans-serif;