web-dev-qa-db-fra.com

Site Web utilisant différentes polices sur différents navigateurs

Les éléments du tableau de navigation sur mon site Web à l'adresse www.amsa.mn utilisent une police incorrecte lorsqu'ils sont affichés avec Firefox. La police correcte est chargée lorsque j'accède au site Web avec Safari ou Chrome. Existe-t-il un moyen de forcer Firefox à charger la bonne police?

fontsdesignwebsite-design
4
Harry M

Vous devez convertir la police "Arimo" en une police Web avec un convertisseur tel que http://www.fontsquirrel.com/fontface/generator . Votre CSS fait référence à la police Arimo. La police n'étant pas disponible via CSS, elle tente de la charger localement. Arimo ne sera généralement pas installé sur la plupart des utilisateurs. Une police par défaut apparaîtra à la place.

4
NickWebman

Ça a l'air bien quand je vérifie sur firefox, je suppose que vous avez déjà trouvé une solution? Si non...

Il s'agit probablement d'un problème de déclaration ou du fait que le type de fichier de police utilisé par Firefox est correct.

Comme NickWebman a répondu, allez quelque part comme fontsquirrel.com , dans leur section font-face et trouvez la police que vous voulez et téléchargez-la ou convertissez l'une de vos polices existantes.

Assurez-vous de créer/télécharger tous les différents types de fichiers afin que votre police apparaisse dans tous les navigateurs, car les principaux navigateurs ont tendance à préférer différents types de fichiers - .woff, .ttf, .svg, .eot, etc.

TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone

Une solution pour Internet Explorer consiste à le séparer de la déclaration normale, par exemple.

<!-- specific for IE - .eot -->

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/ProximaNova.eot?') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
<!-- for the other browsers - .woff, .ttf, .svg
@font-face {
    font-family: 'ProximaNova';
    src: local('☺'), url('../fonts/ProximaNova.woff') format('woff'),
    url('../fonts/ProximaNova.ttf') format('truetype'),
    url('../fonts/ProximaNova.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ou, grâce à l'article Bulletproof sur paulirish.com , une solution plus intéressante:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

N'oubliez pas de mettre un repli, par exemple polices Websafe à utiliser si tout se passe, par exemple.

font-family:'yourfontfacefont', Verdana, Tahoma, Arial, Sans-Serif;

Même après tout ce qui précède, les polices ne semblent pas correctes dans IE etc., vous pouvez essayer d'ajouter les éléments suivants:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
-webkit-font-smoothing:subpixel-antialiased;
font-smoothing:subpixel-antialiased;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
letter-spacing:0;
line-height:1;
zoom:1;
1
DBUK

Vous pouvez charger les polices que vous souhaitez utiliser sur votre site comme ceci

@font-face { font-family: Some-Font; src: url('Some-Font.otf'); } @font-face { font-family: Some-Font; font-weight: bold; src: url('Some-Font-Bold.otf'); }

Puis les appliquer avec

h3 { font-family: Some-Font, sans-serif; }

Cela le forcera sur tous les navigateurs

Un bon article sur @ font-face est ici http://www.miltonbayer.com/font-face/

0
Anagio