Pero antes de iniciar, les comparto el tutorial de estilos de letra en html. parte 1 y el tutorial anterior acerca de color e imagen de fondo en html.
Ahora si comencemos con este tutorial.
Para poder cargar en nuestra pagina web una fuente de Google, buscaremos la fuente que sea de nuestro agrado en esta pagina: https://www.google.com/fonts, una ves que tengamos la fuente que sea de nuestro interés veamos cual es su nombre, en mi caso me gusto esta fuente:
Y el nombre de la fuente siempre esta en la parte inferior izquierda en negritas, en este caso "Codystar", una ves que sabemos el nombre de la fuente que nos interesa, ya es momento de implementarla en nuestra pagina web.
Lo que haremos a continuación es cargar la fuente de nuestro interés a un estilo que generaremos. El nuevo estilo lo generaremos dentro de las etiquetas <head> y solo haremos referencia a el dentro de las etiquetas <body>.
<html>
<head>
<link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Codystar">
<style>
texto1
{
font-family: "Codystar";
font-size: 48px;
}
</style>
<title>
Estilo de letra
</title>
</head>
<body>
<pre>
<texto1><font color=red>Texto de Ejemplo</font></texto1>
</pre>
</body>
</html>
En la etiqueta <link> estamos haciendo referencia a la fuente que se encuentra en internet, solo tienen que sustituir "Codystar", por el nombre de la fuente de su elección. Una vez hecho esto dentro de la etiqueta <style>, estamos declarando una función llamada "texto1" (sustituye este nombre por un nombre a tu gusto), cada que utilicemos las etiquetas con el nombre de nuestra función, en este caso:<texto1> Texto que queremos que tenga nuestra fuente</texto1>
A nuestro texto se le aplicara lo que definimos dentro de nuestra función, en este caso, dentro de nuestra función se esta indicando que la fuente que utilizaremos sera la fuente que cargamos anteriormente, en este caso la fuente "Codystar", que tendrán que sustituir por la fuente de su elección, y se esta indicando que el tamaño del texto sera de 48 pixeles (este valor puede cambiar o simplemente omitirse dicha linea).
Y por ultimo dentro de las etiquetas <body> se esta indicando que nuestro texto tendrá nuestra fuente y que sera de color rojo, las etiquetas <font> con el parámetro color, la explique en este tutorial, Color de texto en html.
Y el resultado que obtendríamos con el ejemplo anterior, seria el siguiente:
A continuación les comparto un ejemplo en el que utilizo varias fuentes distintas en una misma pagina web, lo único que necesitamos hacer, es delimitar cada texto con las etiquetas correspondientes a esa fuente.
<html>
<head>
<link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Codystar">
<link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Press Start 2P">
<style>
texto1
{
font-family: "Codystar";
font-size: 48px;
}
texto2
{
font-family: "Monoton";
font-size: 48px;
}
texto3
{
font-family: "Press Start 2P";
font-size: 48px;
}
</style>
<title>
Estilo de letra
</title>
</head>
<body>
<pre>
<texto1><font color=red>Texto de Ejemplo</font></texto1>
<texto2><font color=cyan>Texto de Ejemplo</font></texto2>
<texto3><font color=gold>Texto de Ejemplo</font></texto3>
</pre>
</body>
</html>
Y este seria el resultado que obtendríamos con dicho código:
Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.
Fuente:
https://developers.google.com/fonts/docs/getting_started consultada el 12 de Julio del 2015.
No hay comentarios:
Publicar un comentario