web-dev-qa-db-fra.com

Comment puis-je utiliser Helvetica Neue Condensed Bold en CSS?

Je veux utiliser Helvetica Neue Condensed Bold sur ma page Web, mais cela ne semble pas fonctionner. J'ai essayé ceci: http://jsfiddle.net/ndFTL/ mais cela ne fonctionne pas, il apparaît simplement comme Helvetica Neue Bold.

J'ai Helvetica Neue Condensed Bold installé: enter image description here

Quelqu'un pourrait-il m'aider?

cssfonts
38
user142019

Après beaucoup de violon, je l'ai fait fonctionner (testé uniquement dans Webkit) en utilisant:

font-family: "HelveticaNeue-CondensedBold";

font-stretch a été abandonné entre CSS2 et 2.1, bien qu'il soit de retour en CSS3, mais n'est pris en charge que dans IE9 (je n'aurais jamais pensé pouvoir dire cela à propos de n'importe quel accessoire CSS!)

Cela fonctionne parce que j'utilise le nom postscript (recherchez la police dans Font Book, appuyez sur cmd+I), qui est un comportement non standard. Cela vaut probablement la peine d'utiliser:

font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";

En guise de solution de rechange, d'autres navigateurs pourraient par défaut utiliser serif s'ils ne peuvent pas le résoudre.

Démo: http://jsfiddle.net/ndFTL/12/

74
Rich Bradshaw

J'ai eu le même problème et du mal à le faire fonctionner sur tous les navigateurs.

C'est donc la meilleure pile de polices pour Helvetica Neue Condensed Bold que j'ai pu trouver:

font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;

Encore plus de piles à trouver sur:

http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/

36
Melros

Si quelqu'un cherche toujours Helvetica Neue Condensed Bold, vous avez essentiellement deux options.

  1. fonts.com : autorisez la police réelle en tant que police Web à partir de fonts.com. Gratuit (avec un badge), 10 $/mois pour 250 000 pages vues et 100 $/mois pour 2,5 millions de pages vues. Vous pouvez télécharger la police sur votre bureau avec le plan le plus cher (mais si vous êtes sur un Mac, vous l'avez déjà).
  2. myfonts.com / fontspring.com : Achetez une alternative assez proche comme Nimbus Sans Novus D de MyFont (160 $ ​​pour des pages illimitées), ou Franklin Gothic FS Demi Condensed , de fontspring.com (environ 21,95 $) , forfait unique avec des pages illimitées). Dans les deux cas, vous pouvez également télécharger la police pour votre bureau afin de pouvoir l'utiliser dans Photoshop pour les compositions.

Un compromis très bon marché consiste à acheter Franklin auprès de fontspring puis à utiliser "HelveticaNeue-CondensedBold" comme police préférée dans votre CSS.

h2 {"HelveticaNeue-CondensedBold", "FranklinGothicFSDemiCondensed", Arial, sans-serif;}

Ensuite, si un utilisateur Mac charge votre site, il voit Helvetica Neue, mais s'il se trouve sur une autre plate-forme, il voit Franklin.

[~ # ~] mise à jour [~ # ~] : J'ai découvert qu'une correspondance beaucoup plus proche avec Helvetica Neue Condensed Bold est Nimbus Sans Novus D Condensed bold. En fait, il est également dérivé de Helvetica. Vous pouvez l'obtenir sur MyFonts.com pour 20 $ (ordinateur de bureau) et 20 $ (Web, 10 000 pages vues). Web avec pages vues illimitées est de 160 $. J'ai utilisé cette police partout (c'est-à-dire NE PAS exploiter du tout les Mac intégrés dans "NimbusSansNovusDBoldCondensed") car cela conduit à une conception plus uniforme sur tous les navigateurs. Construit en HN et Nimbus Sans sont très similaires à tous égards, mais la taille en points. Nimbus a besoin de quelques points supplémentaires pour obtenir une taille identique.

12
Greg

"Helvetica Neue Condensed Bold" se met au travail avec Firefox:

.class {
  font-family: "Helvetica Neue";
  font-weight: bold;
  font-stretch: condensed;
}

Mais c'est un échec avec Opera.

4
Lancee Ly

Vous devrez transformer votre police en police Web comme indiqué dans ces SO questions:

Cependant, vous pouvez rencontrer des problèmes de droit d'auteur avec ceci: toutes les polices ne permettent pas la distribution en tant que police Web. Vérifiez votre licence de police pour voir si elle est autorisée.

L'un des moyens gratuits et légaux les plus simples d'utiliser les polices Web est Google Web Fonts . Malheureusement, ils n'ont pas Helvetica Neue dans leur portefeuille.

L'un des moyens non gratuits et légaux les plus simples consiste à acheter la police dans une fonderie qui propose des licences Web. Il se trouve que je sais que la fonderie myFonts fait cela; ils vous donnent même un package complet avec tous les JavaScript et CSS pré-préparés. Je suis sûr que d'autres fonderies font de même.

Edit: MyFonts a Helvetica neue en stock, mais apparemment pas avec une licence Web. Découvrez cette liste de polices similaires dont certaines ont une licence web. En outre, Ray Larabie a quelques belles polices là-bas, avec des licences Web, certaines d'entre elles sont gratuites.

3
Pekka 웃