Cum se utilizează fonturile Web cu Adobe Muse

În acest tutorial vă voi arăta cum să utilizați fonturi web în proiectele Adobe Muse. Vom acoperi opțiunile de fonturi oferite în cadrul catalogului de fonturi web, inclusiv Fonturile Google și fonturile găzduite de tine.

Ne vom uita, de asemenea, la modul în care Adobe Muse se ocupă de tipul care nu se poate fi redat cu fonturi web, așa că să începem!

Uita-te la Screencast

Descărcați videoclipul sau abonați-vă la Tuts + Web Design pe Youtube.

Citiți Tutorialul

Bună, acolo, și bine ați venit pe Tuts + pentru un nou tutorial despre Adobe Muse. Sunt Michael Chaize și vă voi arăta cum puteți utiliza fonturile web în proiectele dvs. Deci, cu Adobe Muse, poți selecta un bloc de text, și folosind instrumentul Text, poți, bineînțeles, să definești tipul de text pe care vrei să-l folosești în design.

Puteți utiliza Fonturile Web Secure, care este o listă a fonturilor instalate în mod implicit în toate browserele, dar acestea sunt fonturi definite de Microsoft în 1996. Așadar, vă recomandăm să adăugați un pic de distracție și creativitate în design folosind web fonturi. Deci, dacă spuneți că doriți să adăugați Fonturi Web, puteți accesa Catalogul fonturilor Adobe Edge Web.

Adobe Edge Web Fonturi Catalog

Deci, acesta este un catalog de fonturi gratuite, de fapt, include toate fonturile Google web și este găzduit de Adobe. Deci, puteți spune, de exemplu, că doriți să o utilizați Aladdin, așa că trebuie doar să-l verifici, apăsați OK, și va adăuga Aladdin la lista de fonturi.

Acum puteți să vă întoarceți și să spuneți că doriți să utilizați Aladdin. Deci, când publicați pagina dvs. și apoi verificați-o în browser, puteți vedea că pot selecta textul. Acesta este textul real pe web.

Fonturile dvs. de sistem

De ce ți-am spus asta? Deoarece dacă doriți să utilizați o familie de fonturi instalată numai pe computer, iată ce se va întâmpla. Deci, îmi aleg textul și căut în fonturile mele de pe calculatorul meu. Și să spunem că vreau să o folosesc Mistral. Veți vedea o nouă pictogramă pe ecran.

Înseamnă că acest font este instalat pe computer, ceea ce este bine. Dar nu înseamnă că o puteți utiliza pe web, nu este un font web și poate că nu aveți o licență pentru ao folosi pe web. De aceea, Adobe Muse, când publicați pagina dvs., o va converti în HTML. Va lua textul și îl va converti într-o imagine. Deci, acum nu pot selecta textul, bine. Este o imagine. Și vedeți, nu este clar și, pentru optimizarea motorului de căutare, nu este bine. Deoarece robotul Google nu va putea să analizeze conținutul acestui text.

Deci, din mai multe motive, acest lucru nu este ceva ce vreți să faceți. Poate că poate fi uneori util pentru un titlu. Bine, vrei să păstrezi aspectul fontului. E in regula. Există însă atât de multe fonturi web disponibile pe web. Deci, vă voi arăta cum puteți folosi orice tip de font web cu o licență corespunzătoare pentru web.

Fonturi Web

Deci, dacă vă întoarceți la meniul fonturilor web, puteți accesa catalogul Edge Web Fonts. Există mai mult de 500 de fonturi. Adică, sunt multe.

Sau puteți utiliza fonturi web găzduite de sine. Adobe Muse are nevoie de fișiere WOFF, EOT sau SVG care sunt standarde deschise pentru a descrie fonturile de pe web pentru un browser web. Așadar, permiteți-mi să vă arăt ce puteți face. Voi alege doar un site care include lista de fonturi gratuite pentru uz comercial, care este Font Squirrel.

Ceea ce îmi place la Font Squirrel este că puteți filtra cu ușurință conținutul catalogului și să spun că vreau un font pe care să îl pot instala și să îl folosesc pe desktop-ul meu, dar și pe site-ul meu.

Deci, voi verifica filtrul de fonturi web aici. Și apoi poți alege, bineînțeles, o categorie, o clasificare. Deci, am nevoie de fontul Slab Serif și chiar arată frumos, așa că voi descărca fișierul.

Deci, am Bold, Bold-italic, Italic și Regular, așa că voi instala Regular pe desktop-ul meu. Doar faceți dublu clic pe și instalați fontul. Acum o pot folosi în site-ul meu Adobe Muse, dar după cum puteți ghici, se va comporta ca Mistral, așa că un font de sistem.

Deci, mă întorc și aleg Amar. Bine, o am în Muse, dar va fi transformată într-o imagine și nu asta vreau. Vreau să folosesc Bitter ca un font web. Deci, din nou, problema este că, atunci când vă întoarceți aici, Adăugați Fonturi Web.

Este în așteptare pentru fișierele WOFF sau fișierele EOT. Deci, pe Font Squirrel, există un serviciu gratuit numit Web Font Generator, pe care îl puteți folosi.

Deci, voi adăuga fonturile. Acesta va încărca fontul, apoi fac clic pe Descarcă kit-ul tău. Și va crea un nou fișier zip pentru mine, care de data aceasta va conține fonturi web.

Bine. Deci, acesta este dosarul Nou și acum am un fișier EOT, SVG, WOFF. Deci, o pot folosi în Adobe Muse. Deci, dacă ne întoarcem în Adobe Muse, acum pot să parcurg calculatorul meu și să selectez acest folder nou care conține fișierele WOFF, EOT și SVG.

Dar, din nou, verificați caseta, doar pentru a confirma că am o licență corespunzătoare, o pot folosi pe web. Și, Adobe Muse va face automat meciul cu fontul Bitter care este instalat pe sistemul meu. Bine. Deci, este foarte important pentru Muse, deoarece în aplicația Desktop, voi folosi sistemul de fonturi și o dată pe web va folosi aceste seturi de fonturi.

Am publicat pagina. Observăm că acest text este bine. Acesta este modul în care se pot adăuga fonturi web direct în Adobe Muse. Și știm cu toții, că tipografia este esențială în Web Design. Și există atât de multe fonturi web disponibile. Cred că este un plus extraordinar.

Mai multe Adobe Muse

Pentru o privire mai detaliată la Adobe Muse, aruncați o privire la cursul meu gratuit Proiectarea și publicarea site-urilor cu Adobe Muse.