Se ho solo WOFF ed EOT, quali browser sto supportando con @ font-face?

Stiamo cercando di acquistare un font che ne consenta l'utilizzo sul Web solo nei formati forniti: WOFF ed EOT.

Non sono sicuro su quali browser funzionino e non riescano a trovare informazioni aggiornate. Quali browser posso supportare solo con questi due?

La mia unica esperienza è con la sintassi di fontspring che ha EOT, WOFF, TTF e SVG.

fonts standards css3

— erik
fonte

Domanda correlata sul sito di Graphic Design: qual è il set più piccolo di formati di caratteri Web che copre tutti i browser?

— user56reinstatemonica8

Risposte:

Questo è il modo standard di caricare con @ font-face , correzioni hacky e tutto !!

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Rimuovi SVG e perderai il supporto per iOS <5.0 quasi completamente

Can I Use ha una tabella eccellente per il supporto del browser in genere un'altra per EOT , un'altra per WOFF , un'altra per SVG e infine un'altra per TTF . Li ho inseriti di seguito per chiarezza e questo dovrebbe guidarti su cosa testare, ma tieni presente che questo cambierà abbastanza rapidamente.

Modifica di wyu : ho compilato una tabella in modo da poter visualizzare il supporto fianco a fianco

@ Supporto browser font-face in genere

@ Supporto browser font-face in genere

Supporto per browser EOT

Supporto per browser EOT

Supporto per browser WOFF

Supporto per browser WOFF

Supporto per browser SVG

Supporto per browser SVG

Supporto per browser TTF

Supporto per browser TTF

— toomanyairmiles
fonte

perché eot viene dichiarato in due modi diversi: .eot e .eot? #iefix?

— sam,

@ Sam stackoverflow.com/questions/8050640/...

— Diego Agulló

Per chiunque controlli questa risposta in futuro ... Android> = 4.4 ora supporta WOFF caniuse.com/#feat=woff

— ozke,

Caro @ozke, vengo dal futuro, grazie per aver condiviso questo fatto utile. Potresti anche essere interessato a sapere che, entro la fine del 2015, l'utilizzo di versioni del browser stock Android che non supportano woffscenderà a meno del 2% degli utenti globali e il browser Android stock sarà eclissato da Chrome per Android (16%) e UC (8%), entrambi supportati woff. Firefox anche per Android; tuttavia, il suo utilizzo non supererà mai l'1%. Ora puoi tornare ad ascoltare "All About That Bass" di Meghan Trainor, che capisco era consuetudine nell'ottobre 2014.

— user56reinstatemonica8

quindi hai bisogno solo dei caratteri web adesso?

— SuperUberDuper

SVG non ti porterà da nessuna parte con @ font-face; ma EOT è supportato da IE; dove come, TTF e OTF sono supportati da tutti gli altri principali browser. Per quanto riguarda WOFF, dal fare alcune letture, con la sua somiglianza con TTF e OTF è abbastanza probabile che sia supportato negli stessi browser di TTF o OTF. Il mio suggerimento, se sei veramente interessato, prova ogni estensione @ font-face in un browser e vedi cosa ottieni, quindi invia ciò che hai ricevuto al W3C affinché possano aggiornare la loro pagina degli standard per il descrittore @ font-face. (Attualmente non include nemmeno estensioni di carattere "sicure").

Se tutto il resto fallisce, sono abbastanza sicuro che W3Schools sia aggiornato: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

— Jeff Langemeier
fonte

Il problema è che Safari Mobile 4.1 e versioni successive supportano solo SVG.

— toomanyairmiles

@toomanyairmiles Ecco perché alla fine lo fa sembrare buono per il tuo "default" e poi lo rende fantastico per coloro che "possono" vederlo. Non può avere una copertura del 100% poiché la maggior parte dei caratteri non ha un OTF, EOT e SVG di per sé.

— Jeff Langemeier,

In realtà puoi. Ho creato diversi siti che hanno una copertura del 100% acquistando font disponibili in tutti e quattro i tipi, oppure usando font gratuiti e generando i file da solo - funziona perfettamente.

— toomanyairmiles

@toomanyairmiles Questo è il punto in cui la digitazione rapida e libera mi uccide, necessaria Non è sempre possibile avere una copertura del 100%, a volte non succede e il progettista deve ricordare che nel peggiore dei casi le persone usano vecchi browser e simili, 100 % di copertura non significa sempre copertura al 100%; dove sono circa il 40-50% degli utenti di Internet sta ancora usando IE 7 o più vecchi, che non supportano molto bene il font-face in primo luogo, per avere una vera copertura del 100% ci deve essere una linea di fondo che sembra "decente" o almeno mantiene il tuo sito nei limiti dei caratteri "più elaborati".

— Jeff Langemeier,

Bene, l'ho provato, su piccoli siti e su quelli di grandi marchi. I caratteri funzionano in IE6 e 7 è la qualità di rendering buona come un browser moderno? No, ma funziona bene.

— toomanyairmiles

I venditori di Webfont hanno davvero bisogno di fornire un supporto eot immediato per i loro caratteri, proprio per questo! Penseresti che questa sarebbe una seconda natura, anche per il cloud (con l'opzione di includere o escludere) - se le persone fossero costrette a dare la caccia a caratteri nella lista nera, ciò non incoraggerebbe la pirateria solo quando i caratteri vengono trovati? @ eb_p1

— eburnett
fonte

Aspetta, perché? EOT era morto quando questa domanda è stata posta per la prima volta, è stato un cadavere in decomposizione quando hai risposto, e oggi non vedo un carattere EOT da oltre un anno.

— SilverbackNet,