html - para - Usando fuentes.otf en navegadores web
fuentes html para web (2)
Estoy trabajando en un sitio web que requiere pruebas de fuentes en línea, las fuentes que tengo son todas .otf
¿Hay alguna forma de incrustar las fuentes y hacer que funcionen en todos los navegadores?
Si no, ¿qué otras alternativas tengo?
De los ejemplos del directorio de fuentes de Google :
@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 en todos los navegadores con .ttf, creo que puede funcionar con .otf. ( Wikipedia dice .otf es mayormente compatible con .ttf) Si no, puedes onlinefontconverter .otf a .ttf
Aquí hay algunos buenos sitios:
Buena imprimación:
Otra información:
Puedes implementar tu fuente OTF usando @ 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 desea admitir una amplia variedad de navegadores modernos, le recomendaría que cambie a los tipos de fuente WOFF y TTF . WOFF tipo WOFF se implementa en todos los navegadores de escritorio principales, mientras que el tipo TTF es una alternativa para los navegadores Safari, Android e iOS más antiguos. Si su fuente es libre, puede convertirla utilizando, por ejemplo, un convertidor de fuente en onlinefontconverter .
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
Si desea admitir casi todos los navegadores que aún existen (no es necesario, IMHO), debe agregar algunos tipos de fuentes más 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 trucos here . Para obtener una vista detallada de qué tipos de archivos son compatibles con los navegadores, consulte:
Soporte del navegador @ font-face
espero que esto ayude