Share
In questo tutorial ti mostrerò come usare i caratteri web nei tuoi progetti Adobe Muse. Tratteremo le opzioni dei caratteri offerte nel catalogo dei caratteri web, inclusi Google Web Fonts e i font ospitati dall'utente.
Vedremo anche come Adobe Muse gestisce il tipo che non si può essere reso con i caratteri web, quindi iniziamo!
Scarica il video o iscriviti a Tuts + Web Design su Youtube.
Ciao, ecco, bentornati su Tuts + per un nuovo tutorial su Adobe Muse. Sono Michael Chaize e ti mostrerò come utilizzare i caratteri web nei tuoi progetti. Quindi, con Adobe Muse, puoi selezionare un blocco di testo e, utilizzando lo strumento Testo, puoi, ovviamente, definire il tipo di carattere che vuoi usare nel tuo disegno.
Puoi utilizzare Web Safe Fonts, che è un elenco di caratteri installati di default in tutti i browser, ma questi sono caratteri definiti da Microsoft nel 1996. Quindi, potresti voler aggiungere un po 'di divertimento e creatività nel tuo design usando il web font. Pertanto, se si dice di voler aggiungere Web Font, è possibile accedere al catalogo dei caratteri Web di Adobe Edge.
Quindi questo è un catalogo di caratteri web gratuiti, in realtà include tutti i tipi di carattere web di Google ed è ospitato da Adobe. Quindi puoi dire, ad esempio, che vuoi usare Aladdin, quindi basta controllare, si preme OK, e aggiungerà Aladdin alla tua lista di caratteri.
Ora puoi tornare indietro e dire che vuoi usare Aladino. Quindi, quando pubblichi la tua pagina e poi la controlli nel browser, puoi vedere che posso selezionare il testo. Questo è vero testo sul web.
Perché ti sto dicendo questo? Perché se vuoi usare una famiglia di font installata sul tuo computer, ecco cosa succederà. Quindi, seleziono il mio testo e sfoglio i miei caratteri sul mio computer. E diciamo che voglio usare Maestrale. Vedrai una nuova icona apparire sul tuo schermo.
Significa che questo font è installato sul computer, il che va bene. Ma ciò non significa che puoi usarlo sul web, non è un font web e forse non hai una licenza per usarlo sul web. Ecco perché Adobe Muse, quando pubblichi la tua pagina, la convertirà in HTML. Prenderà il testo e lo convertirà in un'immagine. Quindi ora non posso selezionare il testo, okay. È un'immagine E vedi, non è nitido e, per, l'ottimizzazione dei motori di ricerca, questo non è buono. Perché il robot di Google non sarà in grado di analizzare il contenuto di questo testo.
Quindi, per diversi motivi, questo non è qualcosa che vuoi fare. Forse può essere utile a volte per un titolo. Ok, vuoi mantenere l'aspetto del carattere. Va bene. Ma ci sono così tanti caratteri web disponibili sul web. Quindi, ti mostrerò come puoi usare qualsiasi tipo di carattere web con una licenza adeguata per il web.
Quindi, se torni al menu dei caratteri web, puoi accedere al catalogo di Edge Web Fonts. Ci sono più di 500 caratteri. Voglio dire, è molto.
Oppure puoi usare font web ospitati da te stesso. Adobe Muse richiede file WOFF, EOT o SVG che sono standard aperti per descrivere i caratteri sul Web per un browser web. Quindi lascia che ti mostri cosa puoi fare. Selezionerò semplicemente un sito Web che elenca i font gratuiti per uso commerciale, ovvero Font Squirrel.
Quello che mi piace su Font Squirrel è che puoi facilmente filtrare il contenuto del catalogo e dire che voglio un font che posso installare e usare sul mio desktop, ma anche sul mio sito web.
Quindi, controllerò il filtro dei font web qui. E poi puoi ovviamente scegliere una categoria, una classificazione. Quindi, ho bisogno del font Slab Serif e sembra davvero carino, quindi scaricherò il file.
Quindi ho grassetto, grassetto corsivo, corsivo e regolare, quindi installerò regolarmente sul mio desktop. Mi basta fare doppio clic e installare il carattere. Ora posso usarlo nel mio sito Adobe Muse, ma come puoi immaginare, si comporterà come Mistral, così come un font di sistema.
Quindi, torno indietro e seleziono Amaro. Ok, ce l'ho in Muse ma sarà convertito in un'immagine, e questo non è quello che voglio. Voglio usare Bitter come font web. Quindi, di nuovo, il problema qui è che, quando torni qui, Aggiungi caratteri Web.
È in attesa di file WOFF o EOT. Quindi, su Font Squirrel, c'è un servizio gratuito chiamato Web Font Generator, che puoi usare.
Quindi, aggiungerò i caratteri. Caricherà il font, quindi clicco su Scarica il tuo kit. E creerà per me un nuovo file zip, che questa volta conterrà caratteri web.
Va bene. Quindi, questa è la nuova cartella, e ora ho un file EOT, SVG, WOFF. Quindi, posso usarlo in Adobe Muse. Quindi, se torniamo in Adobe Muse, ora posso sfogliare il mio computer e selezionare questa nuova cartella che contiene i file WOFF, EOT e SVG.
Ma ancora una volta, controllo la casella, solo per confermare che ho una licenza adeguata, posso usarla sul web. E Adobe Muse eseguirà automaticamente la corrispondenza con il carattere amaro installato sul mio sistema. Va bene. Quindi, è molto importante per Muse perché nell'app Desktop, userò il font di sistema e una volta sul web userà questi set di caratteri.
Pubblicare la pagina. Notiamo che questo è un testo ok. È così possibile aggiungere, i caratteri Web direttamente in Adobe Muse. E sappiamo tutti che la tipografia è essenziale in Web Design. E ci sono così tanti caratteri web disponibili. Penso che sia una grande aggiunta.
Per uno sguardo più dettagliato su Adobe Muse dai un'occhiata al mio corso gratuito Progettare e pubblicare siti Web con Adobe Muse.
Accentsconagua