web-dev-qa-db-fra.com

site Web Font Incorporation, quelle serait la meilleure solution pour la fonctionnalité de navigation croisée?

Parfois, mes clients demandent l’utilisation d’une police spécifique sur leur site Web. J'essaie de l'intégrer à l'aide de CSS @font face, mais ce n'est pas très convivial. J'utilise parfois des polices Google mais elles ne sont jamais exactement les mêmes.

Est-ce que quelqu'un connaît le meilleur moyen d'intégrer une police avec le plus grand nombre de navigations possibles? Pas dans aucun système de gestion de contrôle comme Wordpress.

cssfontscross-browser
1
Paddy

L'option Google est bonne, mais votre meilleure option est @font-face. Il est pris en charge dans presque tous les navigateurs (sauf Opera Mini), que vous pouvez voir sur " puis-je utiliser " et pour le problème de l'affichage de certaines polices dans les navigateurs, juste besoin de trouver les meilleurs paramètres pour votre police. Certains navigateurs sont très légers, comme Lato sur Chrome. Voici les paramètres qui fonctionnent le mieux:

@font-face {
    font-family: 'Lato';
    src: url('/content/Fonts/Lato-Light-webfont.eot');
    src: url('/content/Fonts/Lato-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/content/Fonts/Lato-Light-webfont.woff') format('woff'),
         url('/content/Fonts/Lato-Light-webfont.ttf') format('truetype'),
         url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
    font-weight: 300;
    font-style: normal;
    text-rendering: antialiased;
}

Et puis vous ajoutez une police svg juste pour être utilisée sur les navigateurs webkit:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Lato';
        src: url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
        font-weight: 300;
        font-style: normal;
        text-rendering: antialiased;
    }
}

Expérimentez, c’est le meilleur moyen de savoir, et les réglages seront différents d’une police à l’autre.

2
user2406735

J'aimerais que la réponse soit meilleure que celle que je donne, mais le mieux est d'utiliser un script côté serveur pour déterminer le navigateur Web de l'utilisateur, puis en fonction du navigateur ...

Si c'est vieux comme Netscape 4.xx:

Vous pouvez utiliser la balise de police html pour définir la police et la taille de la police souhaitée. Voir: http://www.w3schools.com/tags/tag_font.asp

Si le navigateur est trop récent pour gérer correctement la balise de police, comme c'est le cas pour la plupart des utilisateurs, vous devrez vous en tenir à la définition des polices en CSS:

Voici un exemple réalisé avec PHP:

<?php
$browser=$_SERVER['HTTP_USER_AGENT'];
$old=0; //assume new browser
if (strpos($browser,"netscape") > -1){$old=1;}
if (strpos($browser,"IE3.0") > -1){$old=1;}
if ($old==1){
//old browser HTML 
?>
<font face="verdana">This is verdana font</font>
<?php
}else{
//new browser HTML
?>
<p style="font-family: verdana;">This is verdana font</p>
<?php
}
?>

En ce qui concerne les polices spécifiques autres que celles que j'ai indiquées, vous pouvez remplacer verdana par le nom de la police de cette police spécifique, mais les utilisateurs devront s'assurer qu'ils ont le fichier de police applicable sur leur système, sinon le rendu de la police peut être incorrect, car le navigateur détecte la prochaine meilleure police.

0
Mike