Utilizzo dei caratteri .otf nei browser Web

440

Sto lavorando su un sito Web che richiede prove dei caratteri online, i caratteri che ho sono tutti .otf

C'è un modo per incorporare i caratteri e farli funzionare su tutti i browser?

In caso contrario, quali altre alternative ho?

— Naruto
fonte

Forse JavaScript dovrebbe essere rimosso dalla lista dei tag qui?

— kzh

754

Puoi implementare il tuo OTFfont usando @ 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 desideri supportare un'ampia varietà di browser moderni, ti consiglio di passare a WOFFe TTFtipi di carattere. WOFFtype è implementato da tutti i principali browser desktop, mentre il TTFtipo è un fallback per i browser Safari, Android e iOS meno recenti. Se il font è un font gratuito, è possibile convertire il vostro font utilizzando ad esempio un onlinefontconverter .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Se vuoi supportare quasi tutti i browser che sono ancora là fuori (non più necessari IMHO), dovresti aggiungere altri tipi di font 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 */
}

Puoi leggere di più sul perché tutti questi tipi sono implementati e sui loro hack qui . Per una visione dettagliata di quali tipi di file sono supportati da quali browser, vedere:

@ Supporto browser font-face

Supporto EOT Browser

Supporto del browser WOFF

Supporto per browser TTF

Supporto per browser SVG-Fonts

spero che sia di aiuto

— scelta
fonte

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 tipo di file .otf come tipo di file valido e servito. L'unico modo per vedere che questo è il problema è seguire il collegamento al carattere (errore 404 in tal caso). È possibile rinominare temporaneamente in .ttf o persino .html per il test. Gli unici caratteri Web supportati da IE sono in formato WOFF. (No, neanche mai sentito!)

— Henrik Erlandsson,

Ehi, che ne dici della performance di questo tipo di font? È buono? O altro è meglio?

— Anggie Aziz,

Mancano le virgolette ( ") negli esempi di codice?

— Steffen,

Sembra che otf dovrebbe funzionare quasi ovunque

— Stephen

Dagli esempi di 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;
}

Funziona su più browser con .ttf, credo che potrebbe funzionare con .otf. ( Wikipedia afferma che .otf è principalmente retrocompatibile con .ttf) Altrimenti, puoi convertire .otf in .ttf

Ecco alcuni buoni siti:

Buon primer:

http://www.alistapart.com/articles/cssatten
Altre informazioni:

http://randsco.com/index.php/2009/07/04/p680

— KZH
fonte