Sto lavorando su un sito web che richiede prove di font online, i font che ho sono tutte .otfUtilizzando otf font sul browser web
C'è un modo per incorporare i font e farli lavorare su tutti i browser ?
In caso negativo, quali altre alternative ho?
È possibile implementare il carattere OTF utilizzando @ font-face come:
@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");
}
Tuttavia, se si desidera supportare una vasta gamma di browser moderniti consiglierei di passare a WOFF e TTF tipi di font . Il tipo WOFF è implementato da tutti i principali browser desktop, mentre il tipo TTF è un fallback per i browser Safari, Android e iOS meno recenti. Se il tuo font è un font gratuito, puoi convertire il tuo font usando ad esempio uno onlinefontconverter.
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
Se si vuole sostegno quasi tutti i browser che è ancora là fuori (non più necessario IMHO), si dovrebbe aggiungere un po 'più di carattere tipi come:
@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 */
}
Si può leggere di più sul perché tutti questi tipi sono implementati e sui loro hack here. Per avere una visione dettagliata di quali tipi di file sono supportati da quali browser, vedi:
speranza che questo aiuti
Ah, mi hai battuto! – kzh
Ha funzionato perfettamente su quasi tutti i browser ... L'unico browser che non ha funzionato è FireFox Linux ... Qualche suggerimento per quello? – Naruto
Nota che se lo stai ospitando su un server Windows, devi aggiungere il file .otf come tipo di file valido e servito. L'unico modo per vedere che questo è il problema è seguire il link al font (errore 404 se è così). Puoi temporaneamente rinominare in .ttf o anche .html per il test. L'unico tipo di carattere Web supportato da IE è il formato WOFF. (No, non ne ho mai sentito parlare!) –
Dagli Google Font Directory esempi:
@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;
}
Questo funziona cross browser con .ttf, credo che potrebbe funzionare con .otf. (Wikipedia dice .otf è per lo più compatibile con .ttf) In caso contrario, è possibile convert la .otf a .TTF
Ecco alcuni buoni siti:
buon primer:
Altro Info:
Forse javascript deve essere rimosso dall'elenco di tag qui? – kzh