Los desarrolladores y dise adores web se han dado cuenta durante mucho tiempo de que la elecci n de la fuente juega un papel muy importante en la creaci n de un dise o nico y memorable. El uso de las Fuentes correctas puede mejorar significativamente la impresi n de un sitio y afectar su percepci n Visual.
Las Fuentes en CSS se pueden conectar con la regla @font-face, que le permite cargar y usar cualquier fuente en una p gina web. Sin embargo, no todas las Fuentes se pueden utilizar en CSS debido a las restricciones de derechos de autor y licencias. A continuaci n se muestra una lista completa de Fuentes que se pueden conectar en CSS sin restricciones.
Las Fuentes Arial, Verdana, Georgia y Tahoma son Fuentes del sistema Windows y, por lo tanto, est n disponibles en todos los dispositivos que ejecutan Windows. Proporcionan un aspecto elegante y moderno del texto y han demostrado durante mucho tiempo ser una opci n confiable para el dise o web.
Otra fuente popular que tambi n se puede conectar sin restricciones en CSS es Helvetica. Es la fuente est ndar en Macintosh y ha estado en la parte superior de las Fuentes populares durante a os. Helvetica presenta un estilo conciso y moderno, que es la elecci n perfecta para un dise o minimalista y elegante.
Adem s, el conjunto de Fuentes Times New Roman y Courier New es un cl sico en el mundo del dise o web. Ambas Fuentes est n disponibles en la mayor a de las plataformas y dispositivos y tienen un estilo reconocible y f cil de Leer.
Estas son solo algunas de las Fuentes que se pueden usar sin problemas en CSS. Sin embargo, es importante recordar que la elecci n de la fuente depende de la meta y el objetivo del proyecto, as como del p blico objetivo esperado.
- Fuentes web
- Fuentes con marcado del sistema
- Fuentes compatibles con Unicode
- Fuentes monoespaciadas
- Fuentes con soporte para diferentes idiomas
- Fuentes geom tricas
- Fuentes manuscritas
- Fuentes decorativas
Fuentes web
Antes de usar Fuentes web en una p gina web, deben estar conectados a trav s de CSS.
En CSS moderno, hay varias formas de conectar Fuentes web:
- Con la regla @ font-face, que le permite definir una fuente personalizada.
- Utilizando servicios especiales como Google Fonts o Adobe Fonts que proporcionan Fuentes para conectarse.
- Con Marcos CSS que proporcionan conjuntos de Fuentes para usar sin tener que conectar archivos adicionales.
La conexi n de Fuentes web a trav s de @font-face requiere que la fuente en s est en los formatos TrueType (.ttf), OpenType (.otf), Web Open Font Format (.woff), as como en archivos con extensi n .eot, .svg y .woff2.
Google Fonts y Adobe Fonts ofrecen una amplia selecci n de Fuentes web gratuitas y de pago para conectarse a p ginas web. Proporcionan c digos especializados para conectar Fuentes desde los servidores del Servicio.
Los Marcos CSS como Bootstrap, Foundation y Semantic UI incluyen conjuntos de Fuentes que se pueden usar sin tener que conectar archivos adicionales. Para usar estas Fuentes, es suficiente conectar el archivo CSS correspondiente del marco.
Fuentes con marcado del sistema
A continuaci n se presentan algunos ejemplos de Fuentes del sistema:
- Sans-serif son Fuentes sans serif. Algunas de las Fuentes del sistema m s populares de esta categor a incluyen Arial, Helvetica, Verdana y Tahoma.
- Serif son Fuentes serif en los extremos de las letras. Algunas de las Fuentes del sistema m s conocidas de la categor a serif incluyen Times New Roman, Georgia y Bodoni.
- Monospace son Fuentes en las que todos los caracteres tienen el mismo ancho. A menudo se usan para Mostrar c digo o datos de texto. Algunas de las Fuentes populares del sistema de tipo monoespaciado incluyen Courier New, Consolas y Lucida Console.
- Cursive son Fuentes que imitan la escritura a mano. Algunas de las Fuentes del sistema conocidas de la categor a cursiva incluyen Comic Sans MS y Brush Script.
- Fantasy son Fuentes fant sticas que tienen un aspecto nico e inusual. Aunque rara vez se usan para el texto principal, pueden ser una buena opci n para t tulos o elementos de acento. Los ejemplos de Fuentes del sistema de la categor a fantas a incluyen Impact y Chiller.
. Por ejemplo, para usar la fuente sans-serif de Arial, puede agregar el siguiente c digo a su CSS:
font-family: Arial, sans-serif;
Esto significa que el navegador primero intentar Mostrar el texto en la fuente Arial, y si esa fuente no est disponible, usar cualquier otra fuente sans-serif disponible.
El uso de Fuentes del sistema le permite lograr una buena legibilidad y compatibilidad con varios dispositivos y sistemas operativos.
Fuentes compatibles con Unicode
- Arial Unicode MS
- DejaVu Sans
- Noto Sans
- Segoe UI
- Roboto
- Droid Sans
- Ubuntu
Estas Fuentes le permiten Mostrar caracteres de varios sistemas de escritura, incluidos el alfabeto cir lico, el alfabeto Latino, el alfabeto Griego, los caracteres chinos y japoneses, el hebreo rabe y muchos otros.
Fuentes monoespaciadas
- Andale Mono
- Courier New
- Consolas
- DejaVu Sans Mono
- Lucida Console
- Monaco
- Roboto Mono
- Source Code Pro
- Ubuntu Mono
Las Fuentes monoespaciadas, tambi n conocidas como Fuentes fijas, tienen el mismo ancho para cada car cter. Son tiles para Mostrar el c digo fuente y otros datos de texto donde se debe mantener la alineaci n y el formato. Al conectar una de estas Fuentes en CSS, podr agregar un estilo nico y legibilidad a sus elementos de texto.
Fuentes con soporte para diferentes idiomas
Es importante que los desarrolladores y dise adores web proporcionen al usuario la interfaz m s f cil de usar y clara, incluida la visualizaci n correcta del texto en diferentes idiomas. Para hacer esto, debe usar Fuentes que admitan no solo el alfabeto Latino, sino tambi n otros alfabetos.
A continuaci n se muestra una lista de Fuentes que proporcionan la visualizaci n de diferentes idiomas:
- Arial-soporta alfabeto Latino, cir lico y otros alfabetos;
- Roboto-desarrollado por Google, soporta una gran cantidad de idiomas;
- Noto Sans creado por Google, cubre la mayor a de los idiomas utilizados en el mundo;
- Droid Sans-dise ado para dispositivos m viles, soporta una variedad de idiomas;
- Open Sans-incluye lat n, Griego y cir lico;
- Lato-fuente con soporte para muchos idiomas, utilizado por los desarrolladores web;
- Segoe UI-desarrollado por Microsoft, proporciona soporte para varios idiomas, incluido el cir lico;
- Helvetica-fuente cl sica, soporta muchos alfabetos;
- Times New Roman-fuente est ndar compatible con muchos idiomas;
- Garamond es una fuente hermosa y vers til adecuada para diferentes idiomas.
Estos son solo algunos ejemplos de Fuentes que brindan soporte para diferentes idiomas. Al seleccionar una fuente, debe tener en cuenta los idiomas que se mostrar n en el sitio web y seleccionar las Fuentes adecuadas para garantizar que el texto se muestre mejor.
Fuentes geom tricas
Los desarrolladores web pueden usar Fuentes geom tricas para crear dise os de sitios web modernos y elegantes. A continuaci n se presentan algunas de las Fuentes geom tricas populares que se pueden conectar con CSS:
| Letra | Ejemplo |
|---|---|
| Montserrat | font-family: 'Montserrat', sans-serif; |
| Roboto | font-family: 'Roboto', sans-serif; |
| Raleway | font-family: 'Raleway', sans-serif; |
| Open Sans | font-family: 'Open Sans', sans-serif; |
| Source Sans Pro | font-family: 'Source Sans Pro', sans-serif; |
.
Brush Script MT
Segoe Script
Mistral
Vivaldi
Distracted Musician
Papyrus
Comic Sans MS
Lucida Handwriting
Snell Roundhand
| Brush Script MT |
|
| Segoe Script |
|
| Mistral |
|
| Vivaldi |
|
| Distracted Musician |
|
| Papyrus |
|
| Comic Sans MS |
|
| Lucida Handwriting |
|
| Snell Roundhand | Texto de ejemplo |
Fuentes decorativas
Aqu hay algunas Fuentes decorativas populares:
- ChristmasLights-fuente que imita las guirnaldas de Navidad;
- ChopinScript-fuente que imita la escritura a mano;
- Pacifico-fuente con l neas onduladas que recuerdan a las olas de la playa;
- BubbleGumSans-fuente que imita el texto burbujeante;
- Amatic SC fuente que imita las letras may sculas escritas a mano;
- Comic Sans MS es una de las Fuentes m s famosas, a menudo utilizada en juegos de computadora y c mics;
- Jokerman-fuente con letras divertidas y decoradas;
- Papyrus-una fuente que se asemeja al texto escrito en papiro;
- Monotype Corsiva-fuente que imita una fuente manuscrita con cursiva;
- Ravie es una fuente con letras grandes y decoradas.
Las Fuentes decorativas pueden ser una buena adici n al dise o de su p gina web, pero su uso debe limitarse y usarse con cuidado para no degradar la legibilidad del texto.
*Es importante: Es posible que las Fuentes decorativas no est n instaladas en la computadora del usuario, por lo que su uso puede ser impredecible. En tal caso, debe proporcionar una fuente de repuesto o usar im genes para Mostrar el texto.