Share
O altă lună, o altă provocare CodePen! Ultima dată când v-am cerut să vă formalizați un formular de înscriere și un 68 dintre voi a participat. De data aceasta vrem să vedem ce combinații de fonturi Google vă recomandăm - cele mai bune exemple vor fi prezentate într-o săptămână!
Vrem să flexați mușchii tipografici și să ne arătați care perechi de fonturi Google credeți că funcționează cel mai bine! Fantezii un pic de Lato cu niște Merriweather? Unica Unu cu Vollkorn vă face să vă slăbiți?
Luați stiloul pe care l-am pregătit și îl tratați două fonturi Google. Aplicați fonturile în orice fel doriți; este posibil să aveți nevoie să modificați alte stiluri tipografice, cum ar fi inaltimea liniei, marimea fontului și spațiul dintre litere, plus puteți schimba culorile dacă simțiți că îmbunătățește personalitatea de tipul pe care l-ați folosit.
Nu atingeți marcajul!
Iată ce trebuie să faceți, în câțiva pași simpli.
În primul rând, mergeți la demonstrația de pe CodePen. S-ar putea să o recunoașteți ca prima pagină care va fi publicată pe site-ul web de către CERN. Asa arata:
Loveste Furculiţă pentru a crea o copie proprie a acesteia, apoi efectuați cât mai multe modificări pe care doriți să le faceți la CSS.
Cea mai rapidă modalitate de a utiliza fonturile Google este să le importați direct. Luați-o pe cea relevantă @import fragment de la Google:
Apoi inserați-l în panoul CSS de pe CodePen pentru al utiliza în stilurile dvs.:
@import url (http://fonts.googleapis.com/css?family=Lato); p font-family: "Lato", sans-serif;
Dacă sunteți conectat (ă) la CodePen puteți edita descrierea apăsând pe Info buton. Utilizați acest lucru pentru a da oamenilor o idee despre ceea ce ați făcut.
Lovit Salvați, ați terminat. Asigurați-vă că ne-ați informat în comentarii când ați terminat - și nu ezitați să ne anunțați prin tweeting-ul nostru @wdtuts, de asemenea.
Asta e! Toate intrările vor fi adăugate la această colecție pe CodePen și cele mai bune exemple vor fi prezentate pe Tuts + într-o săptămână sau cam asa ceva!
Noroc și nu uitați să urmați Tuts + pe Codepen!
Accentsconagua