Tutorial CSS

CSS INICIO Introducción a CSS Sintaxis CSS Selectores de CSS CSS Cómo Comentarios CSS Colores CSS Fondos CSS Bordes CSS Márgenes CSS Relleno CSS Altura/ancho de CSS Modelo de caja CSS Esquema CSS Texto CSS Fuentes CSS Iconos CSS Enlaces CSS Listas CSS Tablas CSS Pantalla CSS Ancho máximo de CSS Posición de CSS Índice Z de CSS Desbordamiento de CSS CSS flotante Bloque en línea CSS Alinear CSS Combinadores de CSS Pseudo-clase CSS Pseudoelemento CSS Opacidad CSS Barra de navegación CSS Menús desplegables de CSS Galería de imágenes CSS Sprites de imagen CSS Selectores de atributos CSS Formularios CSS Contadores CSS Diseño del sitio web CSS Unidades CSS Especificidad CSS CSS !importante Funciones matemáticas CSS

CSS Avanzado

Esquinas redondeadas CSS Imágenes de borde CSS Fondos CSS Colores CSS Palabras clave de color CSS Gradientes CSS Sombras CSS Efectos de texto CSS Fuentes web CSS Transformaciones CSS 2D Transformaciones CSS 3D Transiciones CSS Animaciones CSS Información sobre herramientas de CSS Imágenes de estilo CSS Reflejo de imagen CSS Ajuste de objeto CSS Posición del objeto CSS Enmascaramiento CSS Botones CSS Paginación CSS Columnas múltiples de CSS Interfaz de usuario de CSS Variables CSS Tamaño del cuadro CSS Consultas de medios CSS Ejemplos de CSS MQ Caja flexible de CSS

Responsivo CSS

Introducción a la tracción trasera Vista de RWD Vista de cuadrícula RWD Consultas de medios RWD Imágenes de RWD Vídeos de RWD Marcos RWD Plantillas RWD

Cuadrícula CSS

Introducción a la cuadrícula Contenedor de rejilla Elemento de cuadrícula

CSS SASS

Tutorial de SASS

Ejemplos de CSS

Plantillas CSS Ejemplos de CSS prueba css Ejercicios CSS Certificado CSS

Referencias CSS

Referencia CSS Selectores de CSS Funciones CSS CSS Referencia Aural Fuentes web seguras CSS CSS Animable Unidades CSS Convertidor CSS PX-EM Colores CSS Valores de color CSS Valores predeterminados de CSS Compatibilidad con navegador CSS

Fuentes web seguras CSS


¿Qué son las fuentes seguras para la Web?

Las fuentes web seguras son fuentes que se instalan universalmente en todos los navegadores y dispositivos.


Fuentes alternativas

Sin embargo, no hay fuentes 100% completamente seguras para la web. Siempre existe la posibilidad de que no se encuentre una fuente o no se instale correctamente.

Por lo tanto, es muy importante utilizar siempre fuentes alternativas.

Esto significa que debe agregar una lista de "fuentes de respaldo" similares en la font-family propiedad. Si la primera fuente no funciona, el navegador probará con la siguiente, y con la siguiente, y así sucesivamente. Siempre finalice la lista con un nombre de familia de fuente genérico.

Ejemplo

Aquí, hay tres tipos de fuentes: Tahoma, Verdana y sans-serif. La segunda y tercera fuentes son copias de seguridad, en caso de que no se encuentre la primera.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Las mejores fuentes web seguras para HTML y CSS

La siguiente lista son las mejores fuentes web seguras para HTML y CSS:

  • Arial (sans-serif)
  • Verdana (sans serif)
  • Helvética (sans-serif)
  • Tahoma (sans serif)
  • Trebuchet MS (sans serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier Nuevo (monoespaciado)
  • Brush Script MT (cursiva)

Nota: antes de publicar su sitio web, siempre verifique cómo aparecen sus fuentes en diferentes navegadores y dispositivos, ¡y siempre use fuentes alternativas!



Arial (sans-serif)

Arial es la fuente más utilizada tanto para medios impresos como en línea. Arial también es la fuente predeterminada en Google Docs.

Arial es una de las fuentes web más seguras y está disponible en todos los principales sistemas operativos.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Verdana (sans serif)

Verdana es una fuente muy popular. Verdana es fácilmente legible incluso para tamaños de fuente pequeños.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvética (sans-serif)

La fuente Helvetica es amada por los diseñadores. Es adecuado para muchos tipos de negocios.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Tahoma (sans serif)

La fuente Tahoma tiene menos espacio entre los caracteres.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trebuchet MS (sans serif)

Trebuchet MS fue diseñado por Microsoft en 1996. Utilice esta fuente con cuidado. No es compatible con todos los sistemas operativos móviles.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Times New Roman (serif)

Times New Roman es una de las fuentes más reconocibles del mundo. Se ve profesional y se usa en muchos periódicos y sitios web de "noticias". También es la fuente principal para dispositivos y aplicaciones de Windows.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Georgia (serif)

Georgia es una fuente serif elegante. Es muy legible en diferentes tamaños de fuente, por lo que es un buen candidato para el diseño móvil.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (serif)

Garamond es una fuente clásica utilizada para muchos libros impresos. Tiene un aspecto atemporal y una buena legibilidad.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Courier Nuevo (monoespaciado)

Courier New es la fuente serif monoespaciada más utilizada. Courier New se usa a menudo con pantallas de codificación, y muchos proveedores de correo electrónico lo usan como su fuente predeterminada. Courier New es también la fuente estándar para guiones de películas.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Brush Script MT (cursiva)

La fuente Brush Script MT fue diseñada para imitar la escritura a mano. Es elegante y sofisticado, pero puede ser difícil de leer. Úselo con cuidado.

Ejemplo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Sugerencia: consulte también todas las fuentes de Google disponibles y cómo usarlas.