web-dev-qa-db-fra.com

boutons (texte ou images)

J'aimerais savoir si je devrais créer des boutons CSS ou des boutons d'image pour mon site. Qu'est-ce qui est mieux? Le problème est que le texte est mis en forme avec Helvetica Neue (j'aime beaucoup cette police) et que je ne peux pas l'utiliser comme police Web à cause de problèmes de droits d'auteur.

Si je crée des boutons en CSS, ils sont magnifiques dans le navigateur, mais redimensionnés lorsque l'utilisateur a choisi une taille de texte différente pour leurs navigateurs.

Les boutons d’image ont l’avantage de pouvoir incorporer ma police, mais ne sont pas aussi beaux que des boutons CSS. De plus, dans ce cas, je devais créer des versions de Retina pour les boutons (uniquement pour les futurs ordinateurs dotés d’un écran Retina).

Quelqu'un peut-il m'aider s'il vous plaît dans cette situation délicate? Quelqu'un connaît-il une alternative Web sûre à Helvetica Neue? Devrais-je désactiver le redimensionnement de mon bouton div-containers? Quelle est la norme actuelle en ce qui concerne les boutons de site Web?

TIA!

htmlweb-developmentcsswebsite-design
5
drpelz

En fait, Linotype propose une police Neue Helvetica qui est autorisée à Internet.

Alternatives Web sécurisées

Mais si vous ne voulez pas payer pour la licence Web, les solutions de rechange Web sûres à Helvetica Neue sont Helvetica et Arial. Si vous utilisez simplement sans-serif, la police sans serif par défaut de la plate-forme de l'utilisateur, qui est généralement la suivante:

  • Helvetica pour Mac
  • Arial pour Windows
  • Droid ou Roboto pour Android
  • Deja V, Bitstream Vera Sans, ou Arial (si des polices MS ont été installées) pendant * nix

Pour les utilisateurs de * nix, vous voudrez probablement spécifier Arial ou Bitstream Vera Sans pour obtenir une similitude plus semblable Helvetica à la police par défaut sans serif utilisée par de nombreux systèmes d'exploitation * nix (par exemple Déjà v).

FOSS Fonts

Vous pouvez également intégrer ces polices gratuites open source:

Libération Sans

  • Alternative open source à Helvetica et Arial
  • Partie de la plus grande famille Liberation Fonts des polices sous licence GPL-2 sponsorisées par Red Hat
  • Disponible dans les fichiers .sfd et les binaires .ttf prêts à être utilisés dans la collection de polices Liberation ™ ici à partir du projet Fedora

Arimo

FreeSans

Je préfère généralement utiliser les boutons CSS/texte chaque fois que possible, car cela est plus correct sémantiquement, nécessite moins de bande passante et demande moins de travail. Toutefois, si vous créez un bouton d’image et utilisez les techniques d’accessibilité appropriées (alt texte ou une étiquette de texte accessible par un lecteur d’écran), alors tout devrait bien se passer. Tout dépend du travail que vous êtes prêt à faire pour obtenir un avantage esthétique supplémentaire.

7
Lèse majesté