44 votos

¿Cómo puedo usar .fuentes woff para mi sitio web?

Donde se colocan las fuentes para que CSS se puede acceder a ellos?

Yo estoy usando las fuentes no estándar para el navegador .archivo woff. Digamos que su "impresionante-fuente' almacena en un archivo 'impresionante-de la fuente.woff'.

78voto

bhovhannes Puntos1349

Después de la generación de woff archivos, usted tiene que definir la fuente de la familia, que puede ser utilizado más adelante en todos sus estilos css. A continuación está el código para definir las familias de fuentes (normal, negrita, cursiva negrita, cursiva), los tipos de letra. Se supone, que hay 4 *.woff archivos (para los mencionados tipos de letra), colocado en fonts subdirectorio.

En el código CSS:

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-bold.woff") format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

Después de que las definiciones, sólo se pueden escribir, por ejemplo,

En el código HTML:

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

En el código CSS:

.mydiv {
    font-family: myfont
}

Una buena herramienta para la generación de woff archivos, que pueden ser incluidos en las hojas de estilo CSS se encuentra aquí. No todos los woff archivos funcionan correctamente bajo las últimas versiones de Firefox, y este generador produce 'corregir' las fuentes.

5voto

Mr. Alien Puntos60232

Es necesario declarar @font-face como esta en tu hoja de estilos

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

Ahora bien, si usted desea aplicar este tipo de letra de un párrafo, simplemente lo utilizan como esta..

p {
font-family: 'Awesome-Font', Arial;
}

Más De Referencia

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: