Come incorporare i caratteri in HTML?

Question

Sto cercando di trovare una soluzione decente (soprattutto dal lato SEO) per incorporare i caratteri nelle pagine web. Finora ho visto la soluzione W3C , che non funziona nemmeno su Firefox, e questa soluzione piuttosto interessante . La seconda soluzione è solo per i titoli. Esiste una soluzione disponibile per il testo completo? Sono stanco dei caratteri standard per le pagine Web.

Grazie!

Answer 1

Le cose sono cambiate da quando questa domanda è stata inizialmente posta e risposta. È stato svolto un gran lavoro per ottenere l'incorporamento dei font su più browser affinché il testo del corpo funzioni usando l'incorporamento @ font-face.

Paul Irish ha messo insieme Bulletproof @ sintassi font-face combinando tentativi da più altre persone. Se in realtà leggi l'intero articolo (non solo la parte superiore), consente una singola istruzione @ font-face per coprire IE, Firefox, Safari, Opera, Chrome e forse altri. Fondamentalmente questo può alimentare OTF, EOT, SVG e WOFF in modi che non rompono nulla.

Tratto dal suo articolo:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Lavorando da quella base, Font Squirrel ha messo insieme una varietà di strumenti utili tra cui @ font-face Generator che ti consente di caricare un file TTF o OTF e ottenere l'auto- file di font convertiti per gli altri tipi, insieme a CSS preconfigurati e una pagina HTML demo. Font Squirrel ha anche Centinaia di @ kit di font-face .

Soma Design ha anche messo insieme il FontFriend Bookmarklet , che ridefinisce i caratteri di una pagina al volo così puoi provare le cose. Include il supporto drag-and-drop @ font-face in FireFox 3.6+.

Più di recente, Google ha iniziato a fornire Google Web Fonts , un assortimento di caratteri disponibili in un Licenza open source e fornita dai server di Google.

Restrizioni della licenza

Infine, WebFonts.info ha messo insieme una bella lista wiki di Font disponibili per l'incorporamento di @ font-face in base alle licenze. Non pretende di essere un elenco esaustivo, ma i caratteri su di esso dovrebbero essere disponibili (possibilmente con condizioni come un'attribuzione nel file CSS) per l'incorporamento / collegamento. È importante leggere le licenze , perché ci sono alcune limitazioni che ovviamente non vengono portate avanti nel download dei font.

Answer 2

Prova Facetype.js , converti il ??tuo. Carattere TTF in un file Javascript. Completamente compatibile con SEO, supporta FF, IE6 e Safari e degrada con grazia su altri browser.

Answer 3

No, non esiste una soluzione decente per il tipo di corpo, a meno che tu non sia disposto a soddisfare solo quelli con browser all'avanguardia.

Microsoft ha WEFT , la propria tecnologia di incorporamento dei caratteri proprietaria, ma io no ne ho sentito parlare da anni e non conosco nessuno che lo usi.

Vado d'accordo con sIFR per il tipo di visualizzazione (titoli, titoli dei post di blog, ecc.) e usando uno dei caratteri meno usurati e sicuri per il web per il tipo di corpo (come Trebuchet MS). Se sei annoiato da tutti i font sicuri per il web, probabilmente stai definendo il termine in modo troppo restrittivo - & nbsp; guarda questa matrice di caratteri stock che viene fornita con i principali sistemi operativi e le probabilità sono che sarai in grado di trovare una cascata di caratteri che catturerà quasi tutti gli utenti Web.

Ad esempio: font-family: " Lucida Grande " ;, " Verdana " ;, sans-serif è una cascata di font comune; OS X viene fornito con Lucida Grande, ma quelli con Windows otterranno Verdana, un carattere sicuro per il web con lettere di dimensioni e forma simili a Lucida Grande. Gli utenti di Linux riceveranno anche Verdana se hanno installato il pacchetto di font sicuri per il web che esiste nella maggior parte dei gestori di pacchetti di distro, altrimenti torneranno a un normale sans-serif.

Answer 4

Ed è anche improbabile: EOT è un formato abbastanza restrittivo supportato solo da IE. Sia Safari 3.1 che Firefox 3.1 (bene l'attuale alpha) e possibilmente Opera 9.6 supportano l'incorporamento di caratteri di tipo reale (ttf) e almeno Safari supporta i caratteri SVG attraverso lo stesso meccanismo. Un elenco a parte ha avuto una buona discussione al riguardo indietro .

Answer 5

Dai un'occhiata a Typekit , un'opzione commerciale (hanno anche un pacchetto gratuito disponibile).

Utilizza diverse tecniche a seconda del browser utilizzato (formato @ font-face vs. EOT ) e si occupano di tutti i problemi relativi alla licenza dei font per anche tu. Supporta tutto fino a IE6.

Ecco alcune informazioni su come funziona Typekit:

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http: // www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

Answer 6

Ho chiesto questo qualche tempo fa . La risposta è fondamentalmente che non funziona. : (