html - font - ¿Cómo uso las fuentes.woff para mi sitio web?
fuentes html para web (2)
Debes declarar @font-face como este en tu hoja de estilo
@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, si quieres aplicar esta fuente a un párrafo, simplemente úsalo así ...
p {
font-family: ''Awesome-Font'', Arial;
}
¿Dónde colocas las fuentes para que CSS pueda acceder a ellas?
Estoy usando fuentes no estándar para el navegador en un archivo .woff. Digamos que su ''impresionante fuente'' almacenada en un archivo ''awesome-font.woff''.
Después de la generación de los archivos woff, debe definir font-family, que se puede usar más adelante en todos sus estilos CSS. A continuación se muestra el código para definir tipos de letra de familias de fuentes (para normal, negrita, negrita-cursiva, cursiva). Se supone que hay 4 * archivos .woff (para tipos de letra mencionados), colocados en el subdirectorio de fonts .
En 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 tener esas definiciones, puedes escribir, por ejemplo,
En 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 código CSS:
.mydiv {
font-family: myfont
}
La buena herramienta para generar archivos woff, que se puede incluir en las hojas de estilo CSS se encuentra here . No todos los archivos woff funcionan correctamente en las últimas versiones de Firefox, y este generador produce fuentes "correctas".