Share
Un autre mois, un autre défi CodePen! La dernière fois, nous vous avons demandé de styler un formulaire d’inscription et 68 d’entre vous y ont participé. Cette fois, nous souhaitons savoir quelles combinaisons de polices Google vous recommandez. Les meilleurs exemples seront présentés dans une semaine environ.!
Nous voulons que vous fléchissiez avec vos muscles typographiques et nous indiquiez les paires de polices de Google qui, selon vous, fonctionnent le mieux! Envie d'un peu de Lato avec du Merriweather? Est-ce que Unica One avec Vollkorn vous fait baver?
Prenez le stylo que nous avons préparé et traitez-le avec deux polices Google. Appliquez les polices comme bon vous semble; vous devrez peut-être modifier d'autres styles typographiques tels que hauteur de la ligne, taille de police et l'espacement des lettres, De plus, vous pouvez changer les couleurs si vous pensez que cela améliore la personnalité du type que vous avez utilisé..
Il suffit de ne pas toucher le balisage!
Voici ce que vous devez faire, en quelques étapes simples et faciles.
Tout d’abord, rendez-vous à la démonstration sur CodePen. Vous le reconnaîtrez peut-être comme la première page publiée par le CERN sur le Web. Voici à quoi ça ressemble:
Frappé le Fourchette bouton pour créer votre propre copie, puis apportez autant de modifications que vous le souhaitez au CSS.
Le moyen le plus rapide d'utiliser les polices Google est de les importer directement. Prenez le pertinent @importation extrait de Google:
Ensuite, collez-le dans le panneau CSS sur CodePen pour l'utiliser dans vos styles:
@import url (http://fonts.googleapis.com/css?family=Lato); p font-family: 'Lato', sans-serif;
Si vous êtes connecté à CodePen, vous pouvez modifier la description en appuyant sur le bouton Info bouton. Utilisez ceci pour donner aux gens une idée de ce que vous avez fait.
Frappé sauvegarder, vous avez terminé. Assurez-vous de nous le faire savoir dans les commentaires lorsque vous avez terminé et n'hésitez pas à nous le faire savoir en nous envoyant un tweet @wdtuts..
C'est tout! Toutes les entrées seront ajoutées à cette collection sur CodePen et les meilleurs exemples seront présentés sur Tuts + dans environ une semaine.!
Bonne chance et n'oubliez pas de suivre Tuts + sur Codepen!
Accentsconagua