Sådan bruges Googles Roboto skrifttype overalt
Roboto-skrifttypen er et nyt sæt sans-serif-skrifttype, der er oprettet af Google til Android 4.0 Ice Cream Sandwich-platformen. Det er en flot og elegant skrifttype, der gør det godt på skærme med høj opløsning som dine Android-telefoner og tablets. Den indeholder det fulde sæt skrifttype vægt (indeholder regelmæssige, fed, kursiv og fed kursiv vægt) og bruges hovedsagelig til system apps og alle Google apps. Dette er også det første skridt fra Google til at forene platformen og reducere UI-fragmenteringsproblemet.
For dem, der elsker skrifttyper og ønsker at bruge det på deres applikationer som Microsoft Word, Pages, Photoshop, Gimp eller endda på deres hjemmeside, har Google venligt frigivet skrifttypen gratis, og du kan nu bruge det uden nogen begrænsning (under Apache-softwarelicensen).
Sådan kan du bruge det (næsten) overalt.
1. Gå først til webstedet Roboto font og download skrifttypen (zip-fil).
2. Udpak den zipperede fil. Du skal se en mappe med navnet "Roboto_Hinted_20111129". Åbn mappen, og du skal se alle roboto-skrifttyperne (i (under Apache-softwarelicensen). (Under Apache-softwarelicensen). (Under Apache-softwarelicensen). Forskellige vægt) i .ttf-format.
For Linux (Ubuntu):
Åbn din hjemmemappe og aktiver mulighed for at se skjulte filer / mapper. Find mappen " .fonts ". Hvis den ikke findes, skal du oprette den. Flyt derefter Roboto- fontmappen til denne " .fonts " -mappe.
Genstart din LibreOffice, GIMP, Photoshop eller hvad apps du bruger. Du skal se Roboto-fonten til rådighed for udvælgelse.
Til Windows
Åbn mappen Roboto font. Vælg alle skrifttyper. Højreklik med musen og vælg "Installer".
Dette installerer skrifttyperne på din Windows-maskine. Du kan nu bruge Roboto-skrifttypen i dine applikationer.
Til Mac
Du skal blot trække alle Roboto-skrifttyper til din skrifttype.
Til Android Phone
Da skrifttypen er en systemniveau applikation, vil du ikke kunne ændre skrifttypen let i din Android-telefon. For dem, der har en ældre Android-telefon (forud for Android 4.0 ICS), skal du rodfæste din telefon og installere programmet Skifterskifter. Brugerdefineret Android Font Switcher.
Åbn din File Manager-app, naviger til roten til SD-kortet (/ sdcard) og opret en mappe (hvis ikke findes) ".fontchanger". Placer alle Roboto-skrifttyper i denne mappe. Åbn Font Changer-appen, og giv den tilladelse til SuperUser. Når den er indlæst, skal du se Roboto-fonten for valg i hovedmenuen.
Til iOS
Der er ingen måde at ændre iOS-system skrifttypen uden at jailbreaking enheden. Vær forberedt på at annullere din garanti.
1. Jailbreak din iOS-enhed og installer BytaFont fra Cydia.
2. Gå til "Cydia -> Sektion -> Skrifttyper" og installer Roboto skrifttypen
3. Kør endelig BytaFont-appen, og du skal se Roboto-fonten på listen, klar til at blive anvendt.
Til internettet
Hvis du ønsker at bruge Roboto-skrifttypen på dit websted, kan du bruge CSS3 @ font-face syntaksen til at indlejre ekstern skrifttype på din webside.
1. Gå til FontSquirrel Roboto skriftside og klik på linket "@ font-face Kit". Download "@ font-face kit".
(under Apache Software License).
2. Udpak den zipede fil til din hjemmeside skrifttype mappe. Åbn dit web stilark og tilføj følgende kode:
@ font-face {font-family: 'Roboto'; src: url ('Roboto-Regular-webfont.eot'); src: url ('Roboto-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Regular-webfont.woff') format ('woff'), url Regular-webfont.ttf ') format (' truetype '), url (' Roboto-Regular-webfont.svg # RobotoRegular ') format (' svg '); skrifttype-vægt: normal; skrifttypestil: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Italic-webfont.eot'); src: url ('Roboto-Italic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Italic-webfont.woff') format ('woff'), url Italic-webfont.ttf ') format (' truetype '), url (' Roboto-Italic-webfont.svg # RobotoItalic ') format (' svg '); skrifttype-vægt: normal; skrifttypestil: kursiv } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Bold-webfont.eot'); src: url ('Roboto-Bold-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Bold-webfont.woff') format ('woff'), url Bold-webfont.ttf ') format (' truetype '), url (' Roboto-Bold-webfont.svg # RobotoBold ') format (' svg '); font-weight: bold; skrifttypestil: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-BoldItalic-webfont.eot'); src: url ('Roboto-BoldItalic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-BoldItalic-webfont.woff') format ('woff'), url BoldItalic-webfont.ttf ') format (' truetype '), url (' Roboto-BoldItalic-webfont.svg # RobotoBoldItalic ') format (' svg '); font-weight: bold; skrifttypestil: kursiv } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Thin-webfont.eot'); src: url ('Roboto-Thin-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Thin-webfont.woff') format ('woff'), url Thin-webfont.ttf ') format (' truetype '), url (' Roboto-Thin-webfont.svg # RobotoThin ') format (' svg '); skrifttype-vægt: 200; skrifttypestil: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-ThinItalic-webfont.eot'); src: url ('Roboto-ThinItalic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-ThinItalic-webfont.woff') format ('woff'), url ThinItalic-webfont.ttf ') format (' truetype '), url (' Roboto-ThinItalic-webfont.svg # RobotoThinItalic ') format (' svg '); (under Apache Software License). skrifttype-vægt: 200; skrifttypestil: kursiv } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Light-webfont.eot'); src: url ('Roboto-Light-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Light-webfont.woff') format ('woff'), url Light-webfont.ttf ') format (' truetype '), url (' Roboto-Light-webfont.svg # RobotoLight ') format (' svg '); skrifttype-vægt: 100; skrifttypestil: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-LightItalic-webfont.eot'); src: url ('Roboto-LightItalic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-LightItalic-webfont.woff') format ('woff'), url LightItalic-webfont.ttf ') format (' truetype '), url (' Roboto-LightItalic-webfont.svg # RobotoLightItalic ') format (' svg '); skrifttype-vægt: 100; skrifttypestil: kursiv } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Medium-webfont.eot'); src: url ('Roboto-Medium-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Medium-webfont.woff') format ('woff'), url ('Roboto- Medium-webfont.ttf ') format (' truetype '), url (' Roboto-Medium-webfont.svg # RobotoMedium ') format (' svg '); skrifttype-vægt: 300; skrifttypestil: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-MediumItalic-webfont.eot'); src: url ('Roboto-MediumItalic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-MediumItalic-webfont.woff') format ('woff'), url MediumItalic-webfont.ttf ') format (' truetype '), url (' Roboto-MediumItalic-webfont.svg # RobotoMediumItalic ') format (' svg '); skrifttype-vægt: 300; skrifttypestil: kursiv }
Sørg for at ændre "src" for at pege på stien til fontmappen.
Derefter kan du bruge syntaksen
font-family: "Roboto";
at vise Roboto-skrifttypen på din webside.
Det er det. God fornøjelse!