Share
I denne opplæringen vil jeg vise deg hvordan du bruker webfonter i dine Adobe Muse-prosjekter. Vi vil dekke skrifttypealternativer som tilbys i web skrifttypekatalogen, inkludert Google Web Fonts og skrifttyper som er vert for deg selv.
Vi vil også se på hvordan Adobe Muse håndterer skriver hvilken kan ikke bli gjengitt med webfonter, så la oss komme i gang!
Last ned videoen eller abonner på Tuts + Webdesign på Youtube.
Hei, der, og velkommen tilbake på Tuts + for en ny opplæring om Adobe Muse. Jeg er Michael Chaize, og jeg vil vise deg hvordan du kan bruke webfonter i prosjektene dine. Så med Adobe Muse kan du velge en blokk med tekst, og ved hjelp av tekstverktøyet kan du selvfølgelig definere skrifttypen du vil bruke i designen din.
Du kan bruke Web Safe Fonts, som er en liste over skrifttyper som er installert som standard i alle nettlesere, men disse er fonter definert av Microsoft i 1996. Så, kanskje du vil legge til litt moro og kreativitet i ditt design ved hjelp av web skrifter. Så hvis du sier at du vil legge til webfonter, kan du få tilgang til Adobe Edge Web Fonts Catalog.
Så dette er en katalog av gratis webfonter, faktisk inneholder den alle Google-fonter, og det er vert for Adobe. Så du kan for eksempel si det du vil bruke Aladdin, så du bare sjekker det, du trykker på OK, og det vil legge til Aladdin i listen over skrifter.
Nå kan du gå tilbake og si at du vil bruke Aladdin. Så når du publiserer siden din og deretter sjekker den i nettleseren, kan du se at jeg kan velge teksten. Dette er ekte tekst på nettet.
Hvorfor forteller jeg deg dette? Fordi hvis du vil bruke en skrifttypefamilie som bare er installert på datamaskinen din, er dette hva som vil skje. Så, jeg velger min tekst, og jeg bla gjennom skriftene mine på datamaskinen min. Og la oss si at jeg vil bruke Mistral. Du vil se et nytt ikon vises på skjermen.
Det betyr at denne skrifttypen er installert på datamaskinen, noe som er greit. Men det betyr ikke at du kan bruke det på nettet, det er ikke en web skrifttype, og kanskje du ikke har lisens til å bruke den på nettet. Derfor er Adobe Muse, når du publiserer siden din, konvertert til HTML. Det vil ta teksten og konvertere den til et bilde. Så nå kan jeg ikke velge teksten, okay. Det er et bilde. Og du ser, det er ikke skarpt, og for søkemotoroptimalisering er dette ikke bra. Fordi Google-roboten ikke vil kunne analysere innholdet i denne teksten.
Så av flere grunner er dette ikke noe du vil gjøre. Kanskje det kan være nyttig noen ganger for en tittel. Ok, du vil beholde utseendet på skrifttypen. Det er greit. Men det er så mange webfonter tilgjengelig på nettet. Så, jeg vil vise deg hvordan du kan bruke noen form for web skrifttype med et riktig lisens for Internett.
Så, hvis du går tilbake til webfontsmenyen, kan du få tilgang til katalogen av Edge Web Fonts. Det er mer enn 500 skrifter. Jeg mener det er mye.
Eller du kan bruke selvhostede webfonter. Adobe Muse trenger WOFF, EOT eller SVG-filer som er åpne standarder for å beskrive skrifttyper på nettet for en nettleser. Så la meg vise deg hva du kan gjøre. Jeg vil bare velge et nettsted som viser gratis skrifttyper til kommersiell bruk, som er Font ekorre.
Det jeg liker på Font Ekorre er at du enkelt kan filtrere innholdet i katalogen, og si at jeg vil ha en skrift som jeg kan installere og bruke på skrivebordet mitt, men også på min nettside.
Så, jeg vil sjekke web font filteret her. Og så kan du selvfølgelig velge en kategori, en klassifisering. Så, jeg trenger Slab Serif font og det ser fint ut, så jeg vil laste ned filen.
Så jeg har fet, fet kursiv, kursiv og vanlig, så jeg vil installere vanlig på skrivebordet mitt. Jeg dobbeltklikker og installerer skrifttypen. Nå kan jeg bruke den på min Adobe Muse-side, men som du kan gjette, vil den oppføre seg som Mistral, slik som en systemfont.
Så, jeg går tilbake og velger Bitter. Ok, jeg har det i Muse, men det vil bli omgjort til et bilde, og dette er ikke det jeg vil ha. Jeg vil bruke Bitter som en web skrifttype. Så igjen er problemet her, når du går tilbake hit, Legg til webfonter.
Den venter på WOFF-filer eller EOT-filer. Så på Font Ekorre er det en gratis tjeneste kalt Web Font Generator, som du kan bruke.
Så, jeg vil legge til skrifter. Det vil laste opp skrifttypen, så klikker jeg på Last ned ditt sett. Og det vil opprette en ny zip-fil for meg, som denne gangen vil inneholde webfonter.
Greit. Så, dette er den nye mappen, og nå har jeg en EOT-fil, SVG, WOFF. Så, jeg kan bruke den i Adobe Muse. Så hvis vi går tilbake til Adobe Muse, kan jeg nå Bla gjennom Min datamaskin og velg denne nye mappen som inneholder WOFF, EOT og SVG-filer.
Men igjen, jeg sjekker boksen, bare for å bekrefte at jeg har et riktig lisens, kan jeg bruke det på nettet. Og, Adobe Muse vil automatisk gjøre kampen med Bitter skrift som er installert på systemet mitt. Greit. Så det er veldig viktig for Muse fordi i Desktop-appen, vil jeg bruke systemfonten og en gang på nettet vil den bruke dette settet med skrifter.
Jeg publiserer siden. Vi merker at dette er tekst i orden. Slik kan du legge til webfonter direkte i Adobe Muse. Og vi vet alle, at typografi er viktig i Web Design. Og det er så mange webfonter tilgjengelig. Jeg synes det er et flott tillegg.
For en mer detaljert titt på Adobe Muse ta en titt på mitt gratis kurs Design og publisering av nettsteder med Adobe Muse.
Accentsconagua