Ogni web designer sogna di creare un sito web con una bella tipografia. Ma, sfortunatamente, i browser supportano solo pochi caratteri tipografici, i cosiddetti font "web-safe". Il set standard include i seguenti caratteri: Ariale, Verdana, Volte, Georgia, Courier New e molti altri.
Auricolare definisce un insieme di uno o più caratteri, ciascuno dei quali è costituito da caratteri che hanno caratteristiche di progettazione comuni: peso, stile, design, peso, densità, dimensione, ad esempio caratteri sans-serif (o sans serif), caratteri serif (antiqua ). Il carattere tipografico è costituito da un insieme di caratteri (numeri, lettere, segni di punteggiatura, caratteri speciali e può anche essere costituito da caratteri non alfabetici).
Fontè un insieme di caratteri di dimensioni, peso e stile specifici. Ad esempio, lo stile corsivo 16px Times New Roman è un tipo di carattere e il corsivo Times New Roman 10px è un altro.
@ regola font-face consente di collegare una varietà di caratteri personalizzati. Il browser carica i caratteri nella cache e li usa per definire lo stile del testo sulla pagina. Questo approccio è chiamato incorporamento dei caratteri e caratteri incorporati - caratteri web.
La regola @font-face dovrebbe essere inserita prima di tutte le altre regole CSS in quanto ciò migliorerà le prestazioni della pagina. I font scaricabili possono essere inseriti in una cartella di font speciale creata sul server.
Per includere un font usando la regola @font-face, devi:
1) caricare il file del font sul server in più formati per essere supportato da tutti i browser,
2) specificare il nome del font, registrare un collegamento al file e impostare la descrizione del font,
3) aggiungi il nome del font alla proprietà font-family dell'elemento che verrà renderizzato in quel font.
@font-face ( famiglia di caratteri: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, sign? aggira il bug nel gestore del valore src */ formato url(WebFont.woff) ("woff"), /* tutti i browser moderni, IE9+ */ url(WebFont.ttf) format("truetype"); /* tutti i browser moderni */ ) p (font-family: "WebFont", Arial, sans serif ; )
Questo codice indica al browser di visualizzare il testo all'interno dell'elemento
Utilizzo del carattere Web. Se il browser per qualche motivo non riesce a caricare un determinato carattere, sceglierà quello appropriato dall'elenco dei caratteri. Itera su di loro in quell'ordine finché non trova un carattere che può utilizzare con successo.
All'interno di ciascuna famiglia di caratteri è possibile definire fino a nove pesi. Pertanto, per ogni font incorporato, così come per ogni stile, è necessario impostare una regola @font-face separata, ad es. non si possono dichiarare in una regola due font diversi o un font della stessa famiglia, ma di stili e pesi differenti.
@font-face (famiglia di caratteri: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format( "truetype"); peso del carattere: grassetto; stile del carattere: corsivo; ) @font-face ( famiglia di caratteri: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont .woff) format("woff"), url(WebFont.ttf) format("truetype"); peso carattere: 400; stile carattere: normale; )
In generale, puoi impostare le seguenti proprietà per un font:
@font-face ( font-family: "FontName"; src: url() format(" "); font-variant: ; font-stretch: ; font-weight: ; font-style: ; )
Se si presume che il computer dell'utente abbia il font installato e si desidera che il font venga scaricato solo dopo aver verificato se l'utente lo possiede, è possibile utilizzare il valore local() per impostare l'indirizzo:
@font-face ( famiglia di caratteri: "WebFont"; src: local("WebFont"), url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url (WebFont.ttf) format("truetype"); peso del carattere: grassetto; stile del carattere: corsivo; )
Formati di caratteri Web
La proprietà @font-face ha un buon supporto per i browser, ma browser diversi utilizzano formati di caratteri diversi. Esistono quattro formati di carattere principali:
Formato WOFF(Web Open Font Format), un formato di font web aperto sviluppato da Mozilla. Tecnicamente, WOFF non può essere definito un formato di carattere, poiché è solo un wrapper con una funzione di compressione. Il formato comprime i caratteri TTF/OTF per l'uso sul Web. Inoltre, WOFF consente di aggiungere metadati al file, come le informazioni sulla licenza.
Formati OTF/TTF(Font OpenType e Font TrueType) funzionano nella maggior parte dei browser. Entrambi i formati sono distribuiti gratuitamente.
formato EOT(Embedded Open Type) creato dagli sviluppatori Microsoft, è una copia compressa del font TTF, il cui riutilizzo è vietato dalle tecnologie DRM (Digital Rights Management, digital access rights management). Supportato solo in IE a partire dalla versione 8.
SVG/SVGZ(Scalabe Vector Graphics) è un tipo di file di font che rappresenta la faccia vettoriale di un font. Di norma, ha dimensioni di file inferiori, consentendo così prestazioni migliori sui dispositivi mobili. Funziona con Opera Mobile e iOS Safari.
Difficoltà nell'utilizzo dei caratteri incorporati
1) I file dei caratteri possono essere di grandi dimensioni, quindi in alcuni casi l'aggiunta di @font-face rallenta il caricamento della pagina.
2) Alcuni font hanno restrizioni di licenza che impediscono l'uso gratuito.
3) Alcuni font non stanno bene nelle pagine web.
Caratteri può essere ridimensionato a qualsiasi dimensione, pur essendo nitido e di facile lettura. Possono essere inviati a qualsiasi stampante o altro dispositivo di output supportato da Windows.
Caratteri associati ai caratteri TrueType, ma in genere utilizza un'ampia gamma di caratteri di base, come maiuscolo ridotto, numeri vecchio stile e forme aggiuntive (come glifi e legature). I caratteri OpenType possono essere ridimensionati a qualsiasi dimensione e sono nitidi e facili da leggere. Possono essere inviati a una stampante o altro dispositivo di output supportato da Windows.
Caratteri PostScript dettagliati e hanno prestazioni grafiche elevate. Sono utilizzati per la stampa, in particolare per la stampa professionale di alta qualità di libri e riviste.
Quale carattere scegliere
Dipende da molti fattori. Se hai bisogno di un carattere che sia facile da leggere su schermo e carta, è meglio scegliere carattere di tipo vero.
Se hai bisogno di un set di caratteri di grandi dimensioni per le etichette della lingua e la tipografia, dovresti usare tipo di carattere aperto.
Per pubblicazioni professionali (come riviste patinate) o di stampa industriale, scegli PostScript.
Ehi Habr!
Sono già state scritte montagne di articoli che descrivono diversi aspetti del lavoro con i font web, sono stati raccolti molti esempi di lavoro, ma ogni giorno continuiamo ad affrontare un equivoco elementare su cosa siano i font web. Non tutti hanno il tempo di cercare su Google materiali su questo argomento, quindi ho cercato di rispondere alle domande più frequenti. Questo materiale interesserà principalmente coloro che non hanno ancora approfondito le complessità delle tecnologie dei caratteri.
01. Perché abbiamo bisogno di font web, perché non usare quelli standard?
La prima cosa che mi viene in mente è che i caratteri standard sono terribilmente noiosi e con il loro aiuto è difficile fare qualcosa di originale. Di norma, la maggior parte di loro porta malinconia e sconforto non solo agli utenti, ma anche ai web designer. I caratteri non standard in questo caso sono più espressivi e inoltre ce ne sono un ordine di grandezza in più, quindi c'è molto da scegliere. Eppure, il carattere è parte integrante del marchio, quindi ogni azienda si impegna a utilizzarlo più attivamente, dal momento che è apparsa una tale opportunità tecnica.E sarebbe possibile abbandonare completamente i font standard, soprattutto perché molti sistemi operativi mobili non li supportano (ad esempio, Arial, Taһoma, Verdana e Georgia). Ma, sfortunatamente, il settore, che è stato adattato per molti anni a schermi a 96 DPI e georgia verdans, non era ancora pronto per rapidi cambiamenti e sui vecchi sistemi operativi Windows ci sono ancora problemi con la visualizzazione di caratteri non standard a causa delle peculiarità del meccanismo di rasterizzazione.
02. Come scegliere un buon font web?
Un font non è solo un insieme digitalizzato di lettere creato con un pennello su carta o in Illustrator, ma è anche perfezionato e lucidato al 98%, suggerendo e testando su vari supporti e in diverse dimensioni. Un tale carattere ha un bell'aspetto, il suo stile è perfezionato, non ci saranno problemi né sulla stampante né sullo schermo, trasuda una buona qualità.Tuttavia, quando si sceglie un font, nemmeno questo è molto più importante, ma l'opportunità e la conformità del font al metodo di utilizzo e ai compiti ad esso assegnati. Se lavori con i caratteri, devi capire come funziona tutto quali tecnologie vengono utilizzate. Questo aiuterà a non tenere a mente un mucchio di regole memorizzate incomprensibili, catturate a singhiozzo. Ad esempio, ogni stampante che si rispetti sa perché è indesiderabile utilizzare i font TrueType per la stampa offset, quali font possono essere utilizzati come font di testo e quali font possono essere utilizzati solo per intestazioni o indici. Se non lo sa, dovrà ristampare un'enorme tiratura e al lavoro avrà continue sorprese e problemi. È sorprendente il motivo per cui nessuno fa richieste ai web designer.
03. In che modo i browser visualizzano i caratteri?
Abbastanza spesso ho sentito, dicono, i browser rendono i caratteri da soli, quindi hanno un aspetto diverso ovunque. Ma in effetti, nel rendering dei caratteri è coinvolto uno speciale sottosistema grafico del sistema operativo: in Windows, questo GDI o scrivere direttamente e su OS X e iOS - testo centrale(e precedente QuickDraw). In totale, ci sono 3 meccanismi comuni di rasterizzazione (rendering) dei caratteri: pixel a due colori (bianco e nero), pixel monocromatici (spesso chiamato antialiasing o anti-aliasing regolare) e subpixel. Sub-pixel utilizza la caratteristica dei display LCD e plasma in cui ogni pixel è diviso in 3 parti (rosso, verde e blu) per aumentare la risoluzione orizzontale dell'immagine renderizzata e migliorare la nitidezza.
Tuttavia, i browser scelgono il proprio metodo di rendering, tra quelli forniti dal sistema operativo. Ad esempio, come parte di GDI, ci sono 3 opzioni di rendering: nero/bianco, normale anti-aliasing e subpixel tipo chiaro. La particolarità di quest'ultimo è che lo smoothing avviene solo orizzontalmente, secondo la disposizione dei subpixel. Ecco perché quando lo si utilizza, vediamo spesso denti terribili sui tratti orizzontali e diagonali del tipo. Fortunatamente, Microsoft ha iniziato a migliorare lentamente il meccanismo e GDI è stato sostituito dalla tecnologia DirectWrite, dove è apparso l'anti-alias verticale. Confrontare:
04.TTF o OTF?
TrueType e PostScript erano originariamente formati di caratteri diversi. TrueType utilizza curve di Bezier quadratiche, mentre PostScript utilizza curve cubiche, familiari ai designer di Illustrator e Photoshop. Oggi, entrambi i metodi di descrizione delle curve vengono utilizzati come parte dello stesso formato OpenType, con l'unica differenza che i file TrueType hanno l'estensione TTF, mentre i file PostScript hanno l'estensione OTF. Ciascuna delle tecnologie ha le proprie caratteristiche di suggerimento e specifiche dell'applicazione.
Guarda l'immagine. Se un font TrueType è molto più leggibile in una piccola dimensione, ma in una grande dimensione vediamo dei denti caratteristici, allora per un font PostScript tutto è esattamente l'opposto. Questo perché i browser scelgono metodi di screening diversi per PS e TT. Per PS, il browser ha applicato il solito anti-alias monocromatico e TT è stato elaborato da ClearType. Quindi risulta che TrueType è preferibile per i caratteri di testo e PostScript è più adatto per intestazioni e iscrizioni di grandi dimensioni.
Vediamo anche che non tutti i browser utilizzano ancora DirectWrite. Quindi, non è ancora in Google Chrome.
05. Cos'altro influisce sul display?
A volte è meglio impostare manualmente il metodo di rasterizzazione. Ad esempio, nei browser con il motore Webkit, puoi utilizzare la proprietà CSS - webkit-font-smoothing e abilitare manualmente l'anti-aliasing normale invece dell'anti-aliasing dei sub-pixel e viceversa. Esistono anche modi non banali per far cambiare al browser il metodo di rasterizzazione, su Habré una volta veniva suggerito di usare un hack con text-shadow .Non dobbiamo dimenticare la dimensione del carattere (font-size). La forma del contorno, il contrasto del tratto e la leggibilità possono variare notevolmente da una dimensione all'altra. Metti giù l'editor grafico e guarda come appare il font web nel browser, in combattimento.
Un altro modo per appianare le imperfezioni dell'anti-alias è gestire il colore e il contrasto. Per ridurre l'effetto del contorno cromatico (quando si usa ClearType compaiono bordi gialli e magenta), puoi provare a ridurre il contrasto tonale avvicinando il colore di sfondo al colore del testo. Non lasciarti trasportare troppo, sii consapevole degli utenti ipovedenti.
06. I caratteri web hanno bisogno di suggerimenti?
I suggerimenti sono istruzioni speciali che trasformano il carattere astratto in pixel in un monitor. La stragrande maggioranza dei caratteri (compresi quelli commerciali) non viene accennata, perché si tratta di una procedura piuttosto laboriosa e complicata. I suggerimenti TrueType e PostScript vengono eseguiti in modo diverso. Se prendi un font economico, il formato OTF è più sicuro, perché in TT la procedura è rimasta invariata dai tempi della retinatura in bianco e nero e non è del tutto adeguata, ma per PS la procedura è più semplice, e l'autore ha la possibilità di fare suggerimenti automatici.Un carattere senza accenno diventa sfocato quando rasterizzato e l'altezza delle lettere può saltare.
Da un lato, il carattere suggerito è abbastanza chiaro, contrastante e uniforme, e dall'altro le forme delle lettere sono distorte a seconda delle dimensioni e gli intervalli possono differire da quelli reali. Le lettere obbediscono rigorosamente ai pixel.
In Windows, vediamo forse l'approccio più radicale: font così popolari come Tahoma, Verdana, Arial e Georgia sono stati suggeriti specificamente per GDI ClearType e quando è apparso DirectWrite, i principali font nel sistema operativo hanno dovuto essere suggeriti e aggiornati.
A differenza di Microsoft, Apple adotta l'approccio opposto, quindi i suoi sistemi operativi utilizzano algoritmi che consentono un output di qualità più o meno alta di qualsiasi tipo di carattere e i suggerimenti non vengono affatto presi in considerazione.
Rispondendo alla domanda: l'era dei monitor da 300 DPI si sta avvicinando rapidamente e un numero enorme di dispositivi mobili ha già una tale risoluzione e presto non saranno più necessari suggerimenti. Ma poiché Windows è ancora dipendente dai suggerimenti e si concentra su monitor a bassa risoluzione, prova a scegliere caratteri con suggerimenti o standard di alta qualità come caratteri di testo, altrimenti il testo sarà illeggibile e difficile da leggere.
07. @font-face o Cufon?
Per quanto strano possa sembrare, ci sono ancora persone che si pongono questa domanda. Sembrerebbe che dopo che i browser hanno iniziato a supportare l'attributo @font-face, tutte le altre tecnologie di incorporamento dei caratteri (Cufon, sIFR, Flash) avrebbero dovuto diventare irrilevanti. Ma qualche significato rimane ancora, ad esempio, un modo per sostituire un font con un'immagine, quando sul sito non vengono visualizzate curve vettoriali, ma solo una stampa, come una stampante la stampa su un foglio o Photoshop visualizza un JPG non modificabile. Ciò è consentito da molte licenze di font regolari (desktop). Alcuni produttori di font (come Adobe) consentono di incorporare i font desktop (nei programmi e sul server) purché rimangano protetti e non possano essere scaricati. Se non hai la possibilità di acquistare una licenza web separata, puoi utilizzare un sIFR appropriato quando il font è incorporato con oggetti flash. Lo svantaggio è che viene utilizzato Flash, che non è supportato da tutti i dispositivi. Puoi anche utilizzare la tecnologia Cufon (viene utilizzato Canvas), se la licenza lo consente. Naturalmente, in questo caso, la sceneggiatura sarà ingombrante e la selezione del testo non funzionerà, ma in una situazione disperata funzionerà.Ma è meglio usare @font-face, è sia tecnologicamente più avanzato che più conveniente, inoltre, è stata accumulata sufficiente esperienza per lavorarci. Ha solo uno svantaggio, che non tutti i produttori consentono l'utilizzo dei loro caratteri sul web.
08. In quali formati dovrebbero essere i file dei caratteri?
Oggi, i caratteri preparati per l'incorporamento (@font-face) sul sito dovrebbero essere in più formati contemporaneamente:TTF o OTF- un file di font a noi familiare, ma caricato dal server durante la navigazione nel sito;
WOFF- un archivio sorgente OTF o TTF non protetto, forse il formato più importante supportato dai browser più diffusi, ei file in WOFF sono generalmente 2-2,5 volte più leggeri di quelli originali;
EOT- l'archivio implementato da TT OpenType, che dispone di meccanismi di protezione, è necessario per supportare i vecchi browser Internet Explorer (a partire da IE8, oltre alle curve TrueType, è supportato anche PostScript);
SVG- per supportare il browser Safari.
09. I caratteri web possono essere convertiti?
Qualunque cosa ti venga detto, non puoi semplicemente convertire il file e mantenere la qualità originale del carattere, specialmente se originariamente era in formato OpenType. Nel processo, c'è la possibilità di perdere alcuni dati incorporati nel file del carattere (istruzioni compilate, caratteri aggiuntivi, metriche). Lo noterai quando il file improvvisamente "sottile" durante la conversione, è particolarmente non kosher convertire TrueType in PostScript e viceversa.
Inoltre, il processo di conversione viola quasi sempre i termini di una licenza che vieta la modifica. In altre parole, è lo stesso furto. Quando inserisci i file nel convertitore, assicurati che non li lasci passare e emetterà un avviso, perché il file contiene le firme digitali del produttore e i relativi divieti di modifica.
10. Quanto dovrebbero pesare i caratteri web?
Il browser deve scaricare completamente i file dei caratteri prima di eseguire il rendering della pagina. Potresti aver visto l'effetto di "font flash" (o FOUT), quando i caratteri di sistema standard lampeggiano invece di caratteri esotici per un breve momento. È normale se TTF (OTF) rientra in 100 kb e WOFF (EOT) in 50 kb. Pensa sempre se è necessario utilizzare caratteri non standard, anche se lo usi in 1 breve intestazione, devi comunque scaricare l'intero file del carattere.Più perfezionista è il tuo design, più piccoli possono essere i file dei caratteri e prova a scegliere forme semplici. In questo senso, la forma ideale è un grottesco geometrico aperto con poco contrasto. Per velocizzare il caricamento di un font può essere utile anche includerlo nel foglio di stile con data:uri.
11. Quanti stili di carattere possono essere utilizzati sul web?
Dal punto di vista di un designer, molti caratteri tipografici sono fantastici. E infatti, per l'intestazione - Grassetto, e laggiù, per la barra laterale - ExtraLight, generalmente inseriremo i testi non necessari e li presseremo in grassetto condensato. Eccolo qui: vera ricchezza e diversità stilistica. Ma quando tutta questa "ricchezza" inizia a essere trasferita sul sito, si scopre che tutto è terribilmente lento. Ed è meglio non provare nemmeno ad aprire un sito del genere da un dispositivo mobile. E non dimenticare che ogni stile costa un po' di soldi, ed è del tutto possibile che il cliente ti chieda di trovare un sinonimo di font o di ridurre il numero di stili, se non altro per acquistare un carattere tipografico costoso. È normale utilizzare un massimo di 2-3 stili di uno o caratteri tipografici diversi.12. Devo limitare il set di caratteri?
La risposta a questa domanda dipende dal tipo di sito e da come verrà utilizzato. Le restrizioni possono essere utili perché è possibile ridurre notevolmente le dimensioni dei file. A volte, per ignoranza, gli sviluppatori caricano sul sito file di font pesanti con il suo set completo di caratteri, ed è bene se non ci sono geroglifici (a titolo informativo, il font Arial Unicode contenente la maggior parte dei caratteri della tabella Unicode pesa 22 mb) .Coloro che rendono i siti in lingua inglese i più semplici, non hanno bisogno di caricare caratteri aggiuntivi, solo quelli che sono in Basic Latin (o ASCII). Se usi il carattere solo per i titoli nelle inclusioni russo + inglese, allora i set ASCII (latino di base) e 64 caratteri dell'alfabeto russo saranno sufficienti per te, non è affatto necessario caricare il set cirillico esteso di 420 caratteri. Tutta un'altra storia se il tuo sito è multilingue, nel qual caso, per evitare una visualizzazione errata dei caratteri, dovresti cercare di coprire tutte le lingue utilizzate.
13. È possibile utilizzare i cloni dei caratteri?
Succede che acquistare il font originale sia troppo costoso o del tutto impossibile, quindi sarà opportuno scegliere un sinonimo di font (clone). Naturalmente, non ci si dovrebbe aspettare una qualità straordinaria da loro, anche se sono realizzati, ad esempio, da una famosa azienda russa. Tutto va male quando ti imbatti in un'opera di un alfabetizzato anonimo che ha deciso di cimentarsi in un campo nuovo, attenzione a tali caratteri. Ecco alcuni esempi di cloni (tra parentesi l'originale): FreeSet (Frutiger), Pragmatica e Helios (Helvetica). Si prega di notare che le forme delle lettere possono variare. C'è un gran numero di cloni nella directory dei sinonimi dei caratteri di Paratype.
14. Come testare un font?
Designer, non abituatevi a vedere i caratteri solo attraverso le finestre di Photoshop, gli editor di immagini utilizzano i propri metodi di levigatura del testo e potete essere ingannati da una bella immagine. È molto più utile imparare a testarli e guardarli nei browser. Se è presente una pagina demo, assicurati che tutti i tipi di artefatti e picchi non vengano fuori durante il rendering. C'è anche uno strumento come Typecast , in cui puoi controllare molti caratteri e quindi mostrare la pagina al client. Per chi sceglie un nuovo font per un sito già finito - il servizio Web Fonts Previewer è per te indispensabile, puoi testare qualsiasi font su un sito di lavoro live, come se lo avessi già implementato.15. Ho un font sul mio computer, posso usarlo sul sito?
Innanzitutto, un po' di furto. Conosco molti designer che hanno migliaia di font sui loro computer la cui origine è sconosciuta. Di norma, scaricavano semplicemente da Internet. Ma per qualche ragione, nessuno pensa che la creazione di buoni caratteri richieda mesi e, a volte, anni di lavoro serio! Ma non solo per questo non si può usare singed, non è chiaro da dove siano presi i font, ma perché si possono incontrare serie difficoltà in fase di sviluppo.
Se desideri incorporare un carattere fornito con il sistema operativo nel tuo sito, puoi farlo solo rasterizzandolo o utilizzandolo nelle immagini. Se hai davvero bisogno di incorporare, dovrai acquistare una licenza separata, proprio come i normali caratteri (sono disponibili sia Georgia che Tahoma).
16. Come acquistare un font web?
Quando "acquisti un carattere" il più vicino possibile all'acquisto di un software è quando ottieni una licenza per usarlo piuttosto che i diritti sul file del programma stesso. Si scopre che un file di font compilato legalmente è un programma. La modifica e l'alterazione, se la licenza non lo consente, è considerata una violazione del diritto d'autore.Un modo conveniente per acquistare i font è attraverso i cataloghi dei font (Fonts.com, MyFonts, Ascender, Typekit). Potrai visualizzare, confrontare e scegliere una delle opzioni disponibili per l'utilizzo, pagamento con carta. Per le aziende sarà più semplice contattare direttamente lo studio-produttore o provvedere all'acquisto dei font al cliente
O forse è meglio non spendere soldi per un font? Ci sono molti fantastici font gratuiti là fuori che sono altrettanto buoni di quelli a pagamento!
17. Quali sono le licenze?
Esistono diversi tipi di licenze per i font e, con l'avvento dei font web, la loro varietà è solo aumentata. Nella vita reale, ogni azienda stabilisce le regole del gioco e una licenza di font può contenere funzionalità di varie altre. Saremo interessati al tipicoLa Licenza commerciale generale limita l'uso su un certo numero di dispositivi e consente la distribuzione di opere create utilizzando il font. Possono essere riviste, giornali, volantini, biglietti da visita, immagini di tipo rasterizzato: tutte insieme puoi chiamarle stampe. Questa licenza non è adatta per film, televisione, web e incorporamento in applicazioni e programmi, tali diritti devono essere acquistati separatamente.
Esistono anche licenze specifiche, ad esempio: una licenza con diritti esclusivi. In questo caso, l'azienda acquista tutti i diritti dai designer dei caratteri e anche l'autore del carattere non ha il diritto di utilizzarlo da nessuna parte. È particolarmente sorprendente quando tali caratteri sono su torrent o quando alcuni designer di terze parti li usano.
Licenze gratuite (dominio pubblico) - l'autore del font consente la distribuzione gratuita, a condizione di specificare il proprio nome (Creative Commons) o senza di esso (ad esempio OFL, GPL, Apache 2.0). Questo tipo di licenza consente anche l'uso commerciale, fatta eccezione per le vendite e la distribuzione a pagamento. Esempi: PT Sans, Opensans, Droid. A volte è consentita una modifica del carattere (GPL), ma la modifica che crei eredita automaticamente la stessa licenza (ovvero, puoi anche essere biforcato). La libertà implica che può essere utilizzata su qualsiasi supporto, incl. e web.
Gratuito per uso non commerciale, ovvero puoi usarlo in tutti i casi quando non ci guadagni. Ad esempio, per l'istruzione, gli hobby e i progetti comunitari. A volte, i produttori consentono ai designer di utilizzarlo, nella speranza che il fortunato cliente del designer acquisti una versione commerciale del carattere.
18. Qual è la differenza tra le licenze per i font web?
Le licenze Web sono le nostre preferite e vengono fornite come componente aggiuntivo della licenza principale o separatamente. Regola un caso speciale: l'uso dei caratteri sui siti. Di norma, la limitazione più importante riguarda il numero di visualizzazioni di pagina. Ad esempio, 10 mila al mese, 100 mila o 1 milione, ovvero, più persone visitano il tuo sito, più paghi per la licenza. Ci sono anche opzioni illimitate quando paghi per un font 1 volta, ma sono molte volte più costose. Probabilmente ti sei chiesto se qualcuno stia monitorando il numero di visualizzazioni? Molto spesso no. Ma non dimenticare che un numero enorme di contatori monitora il traffico del tuo sito e, avendo destato il sospetto del venditore, puoi perdere la licenza.Eppure, una licenza web separata non consente l'uso su computer normali. A volte una licenza web viene rilasciata gratuitamente, ovvero, insieme all'acquisto di un font desktop, si ottiene il diritto di utilizzare la sua versione web. Ma questa è ancora una rarità, la stragrande maggioranza dei produttori richiede un costo aggiuntivo.
Dopo l'acquisto, ricevi file speciali che incorpori nel sito (TTF, OTF, WOFF, EOT) e alcuni font non ti consentono di inserire questi file sul sito in una forma non protetta, poiché in teoria terze parti possono ottenere i file dei caratteri stessi. La terza opzione è che utilizzi un servizio Web del produttore di caratteri personalizzati, come Typekit di Adobe, e paghi una quota di abbonamento.
19. Dove posso trovare buoni web font?
Catalogo di font gratuiti di GoogleFontsquirrel è un famoso convertitore e directory di font web
Myfonts: un enorme negozio di font con un comodo sistema di pagamento
Fonts.com - il principale concorrente di MyFonts
Typekit - servizio di noleggio dei font di Adobe
Typecast - il suddetto negozio con servizio di test
PS un'altra risorsa utile suggerita da ilyaerin , WebFont.ru Functionality over Form: Designing for the Reader
Maria Doreuli. Licenza. Per chiarire
Tim Brown. Digita il rendering sul web
Tim Brown. Proprietà CSS che influiscono sul rendering del tipo
Tim Brown. Tipo di rendering: sistemi operativi
Tim Ahrens. Uno sguardo più da vicino al rendering dei caratteri
Tim Ahrens (kit da lettere). Uno sguardo più da vicino ai suggerimenti TrueType
I vantaggi di OpenType/CFF rispetto a TrueType
Ildar Kinyabulatov, web designer di ADV/ingegneria web
Mentre lavori su una piattaforma Mac o PC Windows, utilizzi costantemente i caratteri. Dai grafici, che hanno centinaia o addirittura migliaia di caratteri nelle loro raccolte, agli utenti ordinari che si occupano solo del set standard di caratteri del sistema operativo e delle applicazioni, tutti li utilizzano costantemente durante la creazione di documenti, la lettura di materiali su Internet e gestione dell'interfaccia utente. Capire come differiscono i formati di file dei caratteri di base ti aiuterà a usarli più ampiamente e a sfruttare l'intera gamma di caratteri tipografici.
I file TTF fanno parte del set di caratteri TrueType di Windows. Con l'avvento delle versioni recenti di Mac OS X, questo formato di font a piattaforma singola è diventato comune ed è ora presente su entrambi i sistemi operativi più diffusi al mondo. Apple ha leggermente modificato il formato TrueType, preparandolo a sostituire i caratteri raster obsoleti con uno standard più flessibile e li ha introdotti con successo nel nuovo sistema operativo.
Lo standard TrueType prevede l'utilizzo di un unico file per la descrizione di un font, che contiene tutte le informazioni necessarie per il rendering (disegno) di un font su uno schermo e durante la stampa. Per fare un confronto con TrueType, diciamo che alcuni font tipografici legacy, come PostScript Type 1 (sviluppato da Adobe Systems), hanno un design molto più complesso e leggibile dalla macchina.
Lo standard OTF è l'acronimo di OpenType typeface e si basa sulle più recenti tecnologie di creazione dei caratteri. Come TrueType, i caratteri OpenType sono multipiattaforma. Ma, a differenza del suo predecessore, ti consentono di inserire diversi stili di visualizzazione in un file contemporaneamente e supportano set di caratteri in lingue diverse.
Inoltre, i font OpenType possono utilizzare diversi stili di carattere tipografico a scelta di applicazioni specifiche, modificandoli a seconda del contesto. Questo nuovo standard ha offerto ai designer un'eccellente opportunità per progettare caratteri tipografici che assomigliano alla scrittura a mano. A seconda del particolare font OpenType, può essere basato su algoritmi di curva presi da TrueType o PostScript Type 1.
Lo standard DFONT (file con estensione DFONT) sta per Datafork TrueType font. Il formato di questo file era lo standard per i caratteri di sistema del sistema operativo Mac OS X. Ma, insieme al rilascio di Mac OS X 10.6 Snow Leopard, Apple ha sostituito questo standard con la raccolta di caratteri TTC o TrueType Collection. Il formato DFONT è supportato esclusivamente sotto Mac OS X ed è destinato all'oblio, poiché non è più destinato a diventare multipiattaforma.
Altri formati
I vecchi caratteri bitmap presentavano limitazioni significative. Quindi, ognuno di loro poteva utilizzare solo tre dimensioni (altezze) nei documenti e per questo dovevi ricorrere a un'applicazione speciale per la gestione dei caratteri. Queste restrizioni sono state rapidamente respinte dai grafici.
I font PostScript Type 1 superano questo svantaggio e si adattano bene durante la stampa, ma la stampante deve essere compatibile con questo standard di font. Adobe Systems, lo sviluppatore di questo standard, ha successivamente proposto di utilizzare l'applicazione Adobe Type Manager per rimuovere le restrizioni durante la stampa.
Un file OTF è un file di font sviluppato congiuntamente da Adobe e Microsoft. Questo formato di file include l'aspetto di formati come TrueType e PostScript. I caratteri OpenType possono essere ridimensionati senza perdere la qualità del testo originale.
L'estensione OTF è supportata sui sistemi operativi Mac OS e sui sistemi Windows. Le piattaforme Microsoft hanno iniziato a supportare i file OTF a partire da Windows 2000. Vale la pena notare che questo tipo di file, oltre al suo scopo principale, può essere utilizzato come file modello utilizzato da OpenOffice per generare formule. In tal caso, la presenza di un file .otf è utile per riempire automaticamente le tabelle utilizzando le formule. L'estensione del file OTF ha un'ampia gamma di distribuzione tra gli utenti.
Gli esperti ritengono che questa estensione di file sia un cosiddetto contenitore, formato secondo le regole TrueType e in grado di contenere file di dati PostScript e TrueType. Un font Open Type in grado di memorizzare nuovi tipi di dati che non erano presenti nei formati TrueType. I file con estensione .otf possono memorizzare contorni, metriche e informazioni sul servizio.
Per aprire un file con estensione OTF, come altri file di font, viene utilizzato il visualizzatore di caratteri di Microsoft. Gli utenti MacOS possono aprire un file OTF grazie alla suite Apple Font Book. Un'utilità universale in grado di aprire un file .otf nei sistemi sopra elencati, inclusi quelli su piattaforma Linux, è FontForge.
