Découvrez l'ancien contenu de Polices.com, préservé pour votre référence.
Regroupement des sites web Polices par famille
David Harned dans Archives le 1 novembre 2013
Nous avons toujours veillé à ce que Polices.com Web Polices soit rapide, fiable et facile à utiliser. Aujourd'hui, j'ai le plaisir d'annoncer une nouvelle option que beaucoup d'entre vous (et nous) attendaient depuis un certain temps. Nous offrons désormais la possibilité de regrouper les pages Web polices par famille police , ce qui vous permet d'utiliser différentes graisses sous un même nom de famille CSS. Cela permet d'utiliser des feuilles de style CSS plus conformes aux normes et un code HTML plus propre dans votre site.
Si vous préférez référencer polices en tant que poids individuels, ou si vous êtes simplement à l'aise avec le service tel qu'il est, ne vous inquiétez pas ; nous offrons cette nouvelle approche en tant qu'option lors de la création de projets - de sorte que tous vos projets existants n'ont pas changé. Nous vous recommandons d'utiliser cette nouvelle possibilité avec les nouveaux projets au fur et à mesure que vous avancez.
Je vais vous montrer comment cela fonctionne.
DANS LES PREMIERS JOURS DU WEB POLICES
Tout d'abord, un peu d'histoire si vous vous demandez pourquoi notre service n'a pas été conçu de cette manière à l'origine. Regrouper les sites Web polices par famille n'est pas nouveau ; cela a toujours été l'intention en se basant sur la spécification du W3C pour les CSS. Mais en 2010, lorsque nous avons lancé Polices.com Web Polices, la prise en charge des navigateurs n'était pas ce qu'elle est aujourd'hui.
À l'époque, il était possible de regrouper polices par famille en utilisant @police-face, mais ces configurations provoquaient souvent le plantage des navigateurs Safari sous iOS 3 - ce que nous ne souhaitions pas à nos clients. Ce problème a été corrigé avec iOS 4.2. Avec la migration des utilisateurs vers iOS 7, ce problème appartient à un passé lointain, et le moment est donc venu pour nous d'effectuer ce changement.
Jetons un coup d'œil sur notre site police avant la publication d'aujourd'hui.
CHAQUE POIDS A SA PROPRE FAMILLE...
Historiquement, nos sites Web polices ont été référencés individuellement, chacun au sein de sa propre famille. Aujourd'hui, cela reste l'option par défaut pour les nouveaux projets, et les développeurs qui utilisent cette implémentation existante n'ont pas besoin de faire des changements pour continuer à utiliser le service.
Comme toujours, il suffit d'inclure la référence JS ou CSS à notre service dans le fichier <head> de votre site comme suit :
<script type="text/javascript" src="http://fast.fonts.net/jsapi/8ac15764-9118-4c43-8a15-3fd234faa0e5.js"></script>
Nous nous occupons de la @police-face afin de pouvoir référencer polices individuellement, chaque poids faisant partie de sa propre famille.
police-Famille : "Metro Nova W01 Regular" ;
police-famille : "Metro Nova W01 Bold" ;
police-famille : "Metro Nova W01 Italic" ;
Supposons que vous souhaitiez utiliser un poids gras à afficher lors de l'utilisation de la fonction <strong> dans un paragraphe de texte. Supposons que vous ayez également une section du paragraphe que vous souhaitez rendre dans la police de caractères italique au sein de cette famille à l'aide de la balise <em> étiquette.
Le code de votre page ressemblerait à ceci :
<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>
En supposant que vous ne souhaitiez pas que le navigateur déforme le poids normal police pour créer un effet pseudo-gras ou italique, il vous faudrait appeler une nouvelle famille police chaque fois que vous souhaiteriez modifier une police de caractères pour la rendre grasse ou italique, de manière à ce que les différents police soient référencés.
Votre code CSS ressemblerait à ceci :
p {font-family:'Metro Nova W01 Regular'; font-size:2em;}
p strong {font-family:'Metro Nova W01 Bold'; font-weight:normal;}
p em {font-family:'Metro Nova W01 Italic'; font-style:normal;}
Pour le caractère gras police, vous devez lui attribuer une valeur police-weight:normal puisque vous utilisez l'instance "normale" du caractère gras police. Pour l'italique police , vous devrez également lui attribuer une valeur police-style:normal puisque vous utiliserez l'instance "normale" de l'italique police. C'est un peu gênant, mais c'est nécessaire pour que les bonnes graisses et les bons styles soient appliqués lorsque chaque police est référencé dans sa propre famille.
Le résultat final serait le suivant :
Cela fonctionne. Voyons maintenant la nouvelle option dont vous disposez.
REGROUPER LES POLICES PAR FAMILLE !
Il y a maintenant une autre façon de procéder. Une fois que vous avez activé police family grouping, nous regroupons les familles ensemble et nous permettons de contrôler les CSS police-weight (100-900) et CSS police-style (normal, italic). Par défaut, ces valeurs sont celles que nous pensons les plus efficaces, mais vous pouvez les définir en fonction de vos besoins et de ceux de votre projet.
Tout d'abord, ouvrez le projet et lancez la fenêtre "Add & Edit Polices" pour "Enable Family Grouping".
Ajustez ensuite les CSS Police-weight et CSS Police-style - ou laissez-les tels quels !
Une fois que tout est à votre goût, enregistrez vos modifications. Jetez un coup d'œil à vos options de publication et vous verrez que les familles police sont maintenant regroupées et que vous pouvez les référencer dans une seule famille comme celle-ci, au lieu de trois.
police-famille : "Metro Nova W01" ;
En reprenant l'exemple précédent, vous les référencerez de cette manière dans votre code CSS.
p {font-family:'Metro Nova W01'; font-size:2em;}
La graisse normale (400) est utilisée comme graisse par défaut. Le poids gras (700) est maintenant référencé automatiquement par le navigateur lorsque vous utilisez l'option <strong> tout comme la version en italique serait référencée lorsque vous utilisez la balise <em> . Voici à nouveau le code html de ce qui est rendu sur la page.
<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>
Le résultat final serait le suivant.
Il s'agit de la même chose, mais avec moins de code et un code davantage basé sur des normes.
Disons cependant que la graisse n'est pas assez audacieuse pour votre design. Retournez à la fenêtre "Add & Edit Polices" et changez le poids du noir en "700", puis réglez le poids du gras sur autre chose que 700 afin d'éviter tout conflit avec le polices de la famille.
Enregistrez vos modifications et publiez à nouveau votre projet. Désormais, le navigateur prendra en compte la pondération de 700 que vous avez attribuée et référencera la pondération noire supplémentaire à la place. Votre page ressemble à ceci. C'est très bien !
RÉSUMÉ
C'est tout. Vous pouvez activer et désactiver cette fonction comme bon vous semble pour vos différents projets. Faites-en l'essai !
Comme pour toute nouvelle technologie, il est préférable de ne pas essayer de modifier un projet existant pour activer cette fonctionnalité sans l'avoir testée, car cela pourrait très bien affecter le rendu de votre site, étant donné que la feuille de style CSS sera modifiée. Pour éviter de perturber les sites sur lesquels vous avez déjà implémenté Web polices, nous vous recommandons de commencer à utiliser les options de regroupement de familles avec un nouveau projet. Pour plus de détails sur l'impact de cette fonctionnalité sur votre CSS, consultez cette FAQ.
Nous espérons que cette nouvelle fonctionnalité améliorera votre expérience avec Polices.com Web Polices et qu'elle facilitera plus que jamais la mise en place d'une belle typographie sur le Web.