Estoy trabajando en un sitio web que requiere ensayos de fuentes en línea, las fuentes que tengo son todos .otf.otf fuentes en los navegadores web
¿Hay una manera de incorporar las fuentes y hacer que funcionen en todos los navegadores ?
Si no, ¿qué otras alternativas tengo?
Puede implementar su OTF fuente utilizando @ font-face como:
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}
Sin embargo, si quieres apoyar una amplia variedad de navegadores modernos le recomiendo que para cambiar a WOFF y TTF tipos de fuentes . WOFF tipo es implementado por todos los principales navegadores de escritorio, mientras que el tipo TTF es una alternativa para navegadores antiguos de Safari, Android e iOS. Si su fuente es una fuente libre, puede convertir su fuente usando, por ejemplo, un onlinefontconverter.
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
Si desea el apoyo de casi todos los navegadores que aún está por ahí (no es necesario ya mi humilde opinión), se debe añadir un poco más font-tipos como:
@font-face {
font-family: GraublauWeb;
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.woff") format("woff"), /* Modern Browsers */
url("webfont.ttf") format("truetype"), /* Safari, Android, iOS */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}
Puede leer más acerca de por qué se implementan todos estos tipos y sus hacks here. Para obtener una vista detallada de los cuales los tipos de archivos son compatibles con qué navegadores, ver:
esperanza esto ayuda
¡Ah, me ganaste! – kzh
Funcionó perfectamente bien en casi todos los navegadores ... El único navegador que no funcionó es Firefox Linux ... ¿Alguna sugerencia para eso? – Naruto
Tenga en cuenta que si hospeda esto en un servidor de Windows, debe agregar el tipo de archivo .otf como un tipo de archivo válido y servido. La única forma de ver que este es el problema es seguir el enlace a la fuente (error 404 si es así). Puede cambiar el nombre temporalmente a .ttf o incluso .html para realizar pruebas. Las únicas fuentes web admitidas por IE son el formato WOFF. (¡No, nunca he oído hablar de eso tampoco!) –
A partir de los ejemplos Google Font Directory:
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
Esto funciona con navegadores .ttf, creo que puede trabajar con .otf. (Wikipedia dice .otf es sobre todo compatible con .ttf) Si no, puede convert la .otf a .TTF
Éstos son algunos buenos sitios:
buen manual:
Otra Info:
Tal JavaScript debe ser eliminado de la lista de etiquetas aquí? – kzh