En el desarrollo web, el uso correcto del estilo de fuente proporciona un aspecto atractivo a la aplicación. Estos estilos de fuente brindan pistas visuales sobre el orden de lectura del documento. Por ejemplo, el estilo de fuente del encabezado del documento debe ser negrita y significativo de los demás. El estilo también ayuda a distinguir el contenido importante de los demás.
Los resultados de aprendizaje de este artículo son:
- ¿Qué son las fuentes web de Google?
- ¿Cómo importar fuentes de Google en HTML?
- ¿Cómo utilizar las fuentes de Google en un archivo CSS?
¿Qué son las fuentes web de Google?
La fuente web de Google es una biblioteca de código abierto que contiene cientos de estilos o familias de fuentes. También proporciona API que nos ayudan a usar fuentes web con Android y CSS. Las fuentes de Google son mucho más livianas que otras bibliotecas de fuentes y están disponibles de forma gratuita para uso comercial. Estos son más fáciles de implementar en cualquier sitio web.
De forma predeterminada, CSS ofrece estilos de fuente de fantasía, serif, sans serif, cursiva y monoespaciado. Google Fonts se puede utilizar si desea utilizar otros estilos de fuente.
¿Cómo importar fuentes de Google en HTML?
Para usar Google Fonts en una página HTML, siga los siguientes pasos.
Paso 1: seleccione la familia de fuentes
Primero, abra el Fuentes de Google sitio web oficial y seleccione la fuente que desee. Por ejemplo, hemos elegido el “ langosta dos ' Familia tipográfica:
Paso 2: seleccione los estilos
A continuación, desplácese hacia abajo para ver la lista de estilos. Agrégalos a tu colección haciendo clic en el botón “ + ' signo:
Paso 3: Ver familias seleccionadas
Para ver las familias seleccionadas, haga clic en el icono resaltado a continuación:
Paso 4: Copie el enlace para incrustarlo en el HTML
Después de eso, desplácese hacia abajo y copie el enlace de la familia de fuentes usando el resaltado ' Copiar icono ”:
¿Cómo utilizar las fuentes de Google en el archivo CSS?
Para usar la copia de Google Fonts en CSS para diseñar, revise los ejemplos dados.
Ejemplo 1
Incluir un ' ” elemento para especificar algún contenido o párrafo:
< pag > “El mejor sitio web de tutoriales” pag > Para importar las fuentes de Google, pegue el código copiado en el '
Estilo “p” Elemento
pag {Familia tipográfica: 'Langosta dos' , cursiva;
alineación de texto: centro;
tamaño de fuente: 45px;
color: rgb ( 64 , 3 , 162 , 0.8 ) ;
}
Las siguientes propiedades CSS explicadas se aplican al HTML “ ' etiqueta:
- “ Familia tipográfica ” se asigna con el valor “ 'Langosta dos', cursiva ”. Esta familia de fuentes se importa de Google Fonts.
- “ texto alineado ” ajusta la alineación del texto.
- “ tamaño de fuente ” determina el tamaño de la fuente.
- “ color ” establece el color de la fuente.
La imagen muestra que la familia de fuentes se aplicó con éxito:
Ejemplo 2
Tomemos otro ejemplo para importar el ' nerko uno ” Fuente de Google. Para ello, vuelva a pegar el código de la URL de la fuente de Google 'Nerko One' en el '
Estilo “p” Elemento
pag {Familia tipográfica: 'Nerko Uno' , cursiva;
peso de fuente: 300 ;
tamaño de fuente: 30px;
}
Él ' Familia tipográfica ”, “ peso de fuente ', y ' tamaño de fuente 'Se aplican propiedades al HTML' ' elemento.
Producción
Le hemos enseñado cómo importar fuentes web de Google en el archivo CSS.
Conclusión
Para importar Google Fonts en CSS, primero visite la Fuentes de Google sitio web oficial y seleccione el estilo de fuente. Luego, copie el código que contiene el “ @importar ” palabra clave y péguela en el archivo CSS o en el “