25-Fuentes en css

Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan una sitio web.

Es importante usar una fuente que sea fácil de leer.

En CSS hay cinco familias de fuentes genéricas:

Las fuentes Serif tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de formalidad y elegancia.
Las fuentes sans-serif tienen líneas limpias (sin pequeños trazos adjuntos). Crean un aspecto moderno y minimalista
Fuentes monoespaciadas : aquí todas las letras tienen el mismo ancho fijo. Crean un aspecto mecánico.
Las fuentes cursivas imitan la escritura humana.
Las fuentes de fantasía son fuentes decorativas/divertidas.

...

Diferencia entre fuentes Serif y Sans-serif

Nota: en las pantallas de las computadoras, las fuentes sans-serif se consideran más fáciles de leer que las fuentes serif.

Algunos ejemplos de fuentes

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

La propriedad "font-family"

Nota si el nombre de la fuente es más de una palabra, debe estar entre comillas, como: "Times New Roman"

Ejemplo de 3 parrafos con 3 fuentes distintas

style="font-family: 'Times New Roman', 'Times, serif'"

style="font-family: Arial, Helvetica, sans-serif;"

style="font-family: 'Lucida Console', 'Courier New', monospace;"

Fuentes web seguras

no hay fuentes 100% completamente seguras para la web

siempre hay un posibilidad de que no se encuentre una fuente o no esté instalada correctamente

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

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.

style="font-family: Tahoma, Verdana, sans-serif;"

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

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

Nota Antes de publicar su sitio web, siempre verifique cómo su las fuentes aparecen en diferentes navegadores y dispositivos, y siempre usan fuentes de reserva !

Ejemplo de las diversas fuentes

Esta fuente es "Arial"

Esta fuente es "Verdana"

Esta fuente es "Tahoma"

Esta fuente es "Trebuchet MS"

Esta fuente es "Times New Roman"

Esta fuente es "Georgia "

Esta fuente es ""

Ls fuentes secundarias mas usuales son las seguientes:

Serif
Sans serif
monovolumen
Cursivo
Fantasía

Algunos ejemplos de estas fuentes

style="font-family: 'Times New Roman', Times, serif;"

style="font-family: Georgia, serif"

style="font-family: Garamond, serif"

style="font-family:Arial, Helvetica, sans-serif "

style="font-family:'Courier New', Courier, monospace "

style="font-family: 'Brush Script MT', cursive"

style="font-family: Copperplate, Papyrus, fantasy"

Estilos de fuentes

La propriedad font-style se utiliza para poner estilos a las fuentes

Esta propiedad tiene tres valores:

normal - El texto se muestra normalmente
cursiva - El texto se muestra en cursiva
oblicuo - El texto está "inclinado" (oblicua es muy similar a cursiva, pero menos compatible)

Ejemplos de estilos de fuentes:

style="font-style: normal;"

style="font-style: italic;"

style="font-style: oblique;"

Propriedad "font-weight"

Ejemplos

style="font-weight: normal;"

style="font-weight: bold;"

Propriedad font-variant

Esta propriedad especifica si un texto debe o no mostrarse en letra minúscula.

En una fuente de mayúsculas pequeñas, todas las letras minúsculas se convierten en mayúsculas letras. Sin embargo, las letras mayúsculas convertidas aparecen en un tamaño de fuente más pequeño. que las letras mayúsculas originales en el texto.

style="font-variant: normal;"

style="font-variant: small-caps;"

Tamaño de fuente

La propriedad font-size estabelece el tamano de una fuente

Ser capaz de administrar el tamaño del texto es importante en el diseño web. Sin embargo, usted no debe usar ajustes de tamaño de fuente para hacer que los párrafos parezcan encabezados, o los encabezados parecen párrafos.

Los tamanhos de las fuentes se pueden expresar en : pixeles, em, porcentages

Ejemplo de tamanos de fuentes

style="font-size: 30px;"

style="font-size: 2.5em;"

style="font-size: 100%;"

Nota El tamaño se puede calcular de píxeles a em usando esta fórmula: píxeles / 16 = em

Fuentes google

Si no se encuentra una fuente que quede bien en nuestra pagina, podemos usar las fuentes google

Como se usan?

Simplemente agregue un enlace de hoja de estilo especial en la sección <head> y luego consulte la fuente en el CSS.

ejemplo de codigo

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Si queremos usar una fuente llamada "Trirong" de Google Fonts:

codigo

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>

Ir al indice