web-dev-qa-db-fra.com

Utilisation d'Helvetica Neue dans un site Web

Normalement, j'utilise "Helvetica Neue" pour les polices de certains sites Web, même si je regarde d'autres sites, j'en ai vu avec "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue".

Y a-t-il une raison de faire référence à Helvetica Neue de cette manière? Ou devrais-je m'en tenir à la normale que j'utilise?

htmlcssfonts
18
user1505209

Ils adoptent une approche "fusil de chasse" pour référencer la police. Le navigateur tentera de faire correspondre chaque nom de police avec toutes les polices installées sur la machine de l'utilisateur (dans l'ordre dans lequel elles ont été répertoriées).

Dans votre exemple "HelveticaNeue-Light" sera essayé en premier, si cette variante de police n'est pas disponible, le navigateur essaiera "Helvetica Neue Light" et enfin "Helvetica Neue".

Pour autant que je sache "Helvetica Neue" n'est pas considéré comme une "police Web sécurisée", ce qui signifie que vous ne pourrez pas compter sur son installation pour l'ensemble de votre base d'utilisateurs. Il est assez courant de définir "serif" ou "sans-serif" comme position finale par défaut.

Pour utiliser des polices qui ne sont pas sécurisées sur le Web, vous devrez utiliser une technique connue sous le nom d'incorporation de polices. Les polices intégrées n'ont pas besoin d'être installées sur l'ordinateur d'un utilisateur, mais elles sont téléchargées dans le cadre de la page. Sachez que cela augmente la charge utile globale (tout comme une image) et peut avoir un impact sur les temps de chargement des pages.

Google Fonts est une excellente ressource pour les polices gratuites avec des licences open source. (Vous devez toujours vérifier les licences individuelles avant de les utiliser.) Chaque police a un lien de téléchargement avec des instructions sur la façon de les intégrer dans votre site Web.

18
Red Taz

Je recommanderais cet article sur les astuces CSS de Chris Coyier intitulé Better Helvetica:

http://css-tricks.com/snippets/css/better-helvetica/

Il recommande essentiellement la déclaration suivante pour couvrir toutes les bases:

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}
36
Billy Moat

En supposant que vous avez référencé et correctement intégré votre police à votre site (en utilisant probablement un kit @ font-face), il devrait être juste de référencer la vôtre comme vous le faites. Vraisemblablement, c'est comme ça, donc ils ont des replis, car certains navigateurs ne rendent pas les polices correctement

0
Andrew Morris