Los últimos tutoriales de desarrollo web
 

W3.CSS Fuentes


Fuentes W3.CSS

Hacer la web hermoso!

Con W3.CSS es extremadamente fácil de añadir nuevas fuentes a una página web.

  • Muy fácil de usar (sólo CSS y HTML)
  • Uso ilimitado de bibliotecas de fuentes externas (como Google Fuentes)
  • Funciona en todos los navegadores modernos

Utilizando una clase de fuente

Hacer la Web!

En la cabecera de su página web (o en su hoja de estilo), cree una clase de letra:

Ejemplo

.w3-myfont {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

En el cuerpo de su página web, utilizar el nombre de clase:

Ejemplo

<body>
  <p class="w3-myfont">Making the Web!</p>
</body>
Inténtalo tú mismo "

Las fuentes externas

En la cabecera de su página web, incluir una fuente externa, y dar a la fuente a la clase:

Ejemplo

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<style>
.w3-tangerine {
  font-family: 'Tangerine', serif;
}
</style>

En el cuerpo de su página web, utilizar el nombre de clase:

Ejemplo

<body>
  <p class="w3-tangerine">Making the Web!</p>
</body>
Inténtalo tú mismo "

Más ejemplos

Hacer la Web!

Ejemplo

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Inténtalo tú mismo "
Hacer la Web!

Ejemplo

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
Inténtalo tú mismo "
Hacer la Web!

Ejemplo

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Inténtalo tú mismo "
Nota Efectos de fuente no funciona en Internet Explorer 9 y versiones anteriores.

Cambio de la página de fuentes

En la cabecera de su página web (o en su hoja de estilo), después de haber cargado w3.css, cambiar el estilo de HTML y el cuerpo:

Ejemplo

<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<style>
html , body {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
Inténtalo tú mismo "