Améliorer votre site avec des polices personnalisées

Pour la plupart des concepteurs de sites Web, la police des polices fait pas

Sommaire

deborde. Les 11 polices intégrées dans les Apple iOS, représentés sur cette figure, sont très insuffisants. Concepteurs graves passent des heures à la recherche de la bonne police pour transmettre le sentiment qu'ils veulent susciter dans un design. Voilà pourquoi de nombreux designers sont ravis que CSS 3 propose une nouvelle solution.

La @ font-face option, le nouvel en CSS 3, vous permet de relier à toute police qui est disponible à partir d'un serveur Web. Ajouter un peu d'ombre et d'autres éléments de style avec CSS, et vous pouvez créer de fantastiques effets de police sans avoir recours à l'ancienne solution de contournement pour les polices limitées: l'enregistrement des images de texte stylé créé dans Photoshop.

Après avoir généré le code que vous avez besoin sur Font Squirrel, vous pouvez commencer à utiliser la police sur vos pages web en quelques étapes simples. L'exemple suivant montre le code que vous voyez si vous avez une police personnalisée à travers le générateur Font Squirrel.

Tout d'abord, vous ajoutez la police dans la région de la tête de votre page en utilisant cette syntaxe:

@ font-face {font-family: 'GoodDogRegular'-src: url (' GoodDog-webfont.eot ') - src: url (' GoodDog-webfont.eot Idéfix?) Format ('EOT'), url (' GoodDog-webfont.woff ') Format (' WOFF '), url (' GoodDog-webfont.ttf ') Format (' TrueType '), url (' GoodDog-webfont.svg # webfontx1QlgLst ') Format (' svg ') - font-weight:-font-style normal: normal-}

Ensuite, vous incluez la police dans une règle de style, et vous pouvez l'appliquer à tout texte sur votre page.

.stylename {font-family: 'GoodDogRegular'-}

Suivez ces étapes pour ajouter l'une des polices dans le Google Font Directory à vos pages:

Ouvrez un navigateur Web (nous recommandons Safari: la version de bureau est plus proche de la version iOS) et visiter Google Web Fonts.
Cliquez sur le nom d'une police pour sélectionner la police que vous souhaitez utiliser dans votre conception.
Cliquez sur l'onglet Utilisez cette fonte au haut de la page pour générer le code dont vous avez besoin, comme illustré.
Copiez le lien dans le premier champ et le coller dans la zone de la tête de votre page web.
Copiez le code de la famille de polices dans le second champ de la page de la police Google Font Directory et le coller dans la feuille de style CSS de votre page Web.
Dans l'exemple illustré, vous voyez que Google a généré la règle dans un style pour le
tag. Vous pouvez utiliser ce code pour créer un style pour le
tag avec la police que vous avez sélectionné, mais vous avez aussi la possibilité d'ajouter la règle de la police à tout autre style CSS.
Appliquer la règle au texte dans votre page web.
Si vous utilisez l'ensemble
règle prévue par Google, tout texte formaté avec le
tag affiche dans cette police. Si vous créez un nouveau style de classe ou ID avec la police dans le cadre de la règle, vous appliquer le style à votre texte pour la police à comparaître, tout comme vous auriez à appliquer tout autre style.

A propos Auteur

Comment changer la police et la police par défaut la taille de Excel 2010

Par défaut, Excel 2010 utilise 11 points Calibri police pour les entrées de cellules, mais vous pouvez changer cela pour une autre police ou la taille de votre choix pour tous les nouveaux classeurs.Modification de la police par défaut ne modifie…

Comment formater polices dans Excel 2010

Excel 2010 inclut plusieurs façons de formater les polices dans vos feuilles de calcul. Vous pouvez changer le visage de la police, taille de police, couleur de police et en utilisant les commandes dans le groupe Police de l'onglet Accueil.Vous…

Comment créer une police de thème dans PowerPoint 2007

Une police de thème que vous créez dans PowerPoint devient partie intégrante du thème que vous travaillez. Il devient disponible pour toutes les présentations PowerPoint que vous créez avec le thème plus tard. Suivez ces étapes pour créer…

Comment changer la police dans Word 2013

L'attribut le plus fondamental de texte dans Word 2013 son typographie, ou police. La police met en place la façon dont votre texte ressemble - son style global de texte. Bien que de décider sur une police appropriée peut être angoissante (et,…

Comment changer la police du texte en parole 2,016

Mots de 2016 magasins de commandes les plus courantes de formatage de texte sur l'onglet Accueil, dans le groupe Police, comme indiqué. L'attribut de base de son texte est typographie, ou police. La police définit la manière dont votre texte…

Polices formatage dans Excel 2007

Excel 2007 inclut plusieurs façons d'appliquer la mise en forme des polices dans vos feuilles de calcul. Vous pouvez changer le visage de la police, taille de police, couleur de police et en utilisant les commandes dans le groupe Police de l'onglet…

Comment changer la police dans Word 2007

Word 2007, il est facile de changer les polices dans votre document. Différentes polices donnent différents regards aux mots qui composent votre texte global. Agrandir1Afficher le menu Polices.Dans l'onglet Ecrire, dans le groupe Police, cliquez…

Comment changer les polices de thème dans PowerPoint 2007

Choix d'un thème dans PowerPoint définit les polices de thème, l'établissement d'une police pour vos rubriques et un autre pour le texte de votre corps. Si vous ne souhaitez pas utiliser les polices de thème associé avec le thème que vous…

Comment configurer la famille de police sur les pages web HTML5 et CSS3

Pour attribuer une famille de polices à une partie de votre page, utiliser une nouvelle CSS. A titre d'exemple, cette page a mis le cap au Comic Sans MS. Si cette page est affichée sur une machine Windows, il affiche généralement la police…

Comment utiliser les polices intégrées pour votre HTML5 et CSS3 pages Web en fonction

Même si un développeur web HTML5 peut suggérer toutes les polices pour une page Web, les fichiers de police sont traditionnellement un atout au niveau du client. Si le client n'a pas la police installée, elle ne le verra pas. Heureusement, CSS3…

Comment formater le texte sur votre site web avec le pi de framboise

Vous pouvez modifier quelques propriétés à modifier la façon dont le texte de votre site ressemble à l'écran avec le Raspberry Pi. Tout ce que vous pouvez ajouter pour rendre votre site plus attrayant visuellement va encourager les gens à…

Comment formater polices dans iBooks Author

iBooks Author prend en charge une variété de polices de caractères (populairement appelé polices) Pour votre texte. iBooks Author ne peut utiliser que les polices dans le menu Polices, qui sont les polices disponibles dans iBooks sur l'iPad.…

Comment incorporer les polices sur votre site blog

À un moment donné, live texte a été limitée à l'utilisation de polices Web sécurisées. Heureusement, vous avez maintenant des choix beaucoup plus intéressantes concernant les polices, grâce à la technologie de la police-enrobage, qui vous…

Trouver polices pour la conception web en ligne

Bien que vous pouvez télécharger toutes les polices que vous avez à votre propre serveur et un lien vers elle, un référentiel de polices en ligne offre de nombreux avantages, la police est stockée sur les serveurs de référentiel et il…

godiches.com » Internet & médias sociaux » Web design & développement » Conception iPhone & iPad web » Améliorer votre site avec des polices personnalisées