Share
Un altro mese, un'altra sfida CodePen! L'ultima volta ti abbiamo chiesto di abbinare un modulo di iscrizione e un bel 68 di voi hanno partecipato. Questa volta vogliamo vedere quali combinazioni di caratteri di Google consigliate: i migliori esempi verranno mostrati in una settimana o giù di lì!
Vogliamo che fletti i tuoi muscoli tipografici e mostraci quali coppie di caratteri di Google pensi che funzionino meglio! Hai voglia di un po 'di Lato con qualche Merriweather? Unica One con Vollkorn ti fa sbavare?
Prendi la penna che abbiamo preparato e trattala due tipi di carattere Google. Applica i caratteri nel modo che preferisci; potrebbe essere necessario modificare altri stili tipografici come altezza della linea, dimensione del font e spaziatura del carattere, in più puoi cambiare i colori se ritieni che migliori la personalità del tipo che hai usato.
Basta non toccare il markup!
Ecco cosa devi fare, in pochi semplici passaggi.
Innanzitutto, vai alla demo su CodePen. Potresti riconoscerla come la prima pagina che verrà pubblicata sul World Wide Web dal CERN. Questo è quello che sembra:
Colpire il Forchetta per creare la tua copia personale, quindi apportare tutte le modifiche che desideri al CSS.
Il modo più rapido per utilizzare i caratteri Google è importarli direttamente. Prendi il relativo @importare snippet di Google:
Quindi incollalo nel pannello CSS su CodePen per utilizzarlo nei tuoi stili:
@import url (http://fonts.googleapis.com/css?family=Lato); p font-family: 'Lato', sans-serif;
Se hai effettuato l'accesso a CodePen, puoi modificare la descrizione premendo il pulsante Informazioni pulsante. Usa questo per dare un'idea alla gente di quello che hai fatto.
Colpire Salvare, hai finito. Assicurati di farci sapere nei commenti quando hai finito, e sentiti libero di farcelo sapere twittando anche noi @wdtuts.
Questo è tutto! Tutte le voci verranno aggiunte a questa raccolta su CodePen e i migliori esempi verranno mostrati su Tuts + in una settimana circa!
Buona fortuna e non dimenticare di seguire Tuts + su Codepen!
Accentsconagua