web-dev-qa-db-fra.com

Police 'Segoe UI' avec font-face et local

Je souhaite utiliser la police "Segoe UI" dans un site Web si elle est installée sur l'ordinateur de l'utilisateur.

J'ai déclaré tous les styles avec @font-face afin d'utiliser le font-weight propriété pour changer l'épaisseur de la police (c'est une fonctionnalité vraiment cool!).

Le problème est que je ne peux pas le faire fonctionner avec Segoe UI Bold (je pense que le nom est incorrect). Une idée?

Voici un exemple. (4) et (5) seraient les mêmes: http://jsfiddle.net/kxHQR/1/

@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 700;
  src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 600;
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 400;
  src: local('Segoe UI'), local('SegoeUI');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 300;
  src: local('Segoe UI Light'), local('SegoeUI-Light');
}

/* ... */

BODY {
 font-family: 'Myname';    
}

.boldtext {
    font-family:'Segoe UI';
    font-weight:700;
}

<p style='font-weight:300'>1. Text with font-weight:300. OK</h1>
<p>2. Here is normal text. OK</p>
<p style='font-weight:600'>3. Text with font-weight:600.  OK</p> 
<p style='font-weight:700' >4. Text with font-weight:700. It must be like (5), but it is like (3). :(</p>
<p class='boldtext'>5. Text with font-family:'Segoe UI' (no font-face) and font-weight:700; </p>
cssfontsembedfont-facetypography
17
Daniel G. Blázquez

Cela vient de Microsoft feuille de style pour les applications Windows 8 (Metro) :

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

L'approche ci-dessus fonctionne pour moi et est également l'approche utilisée par Open Sans et les polices Google . Cependant, c'est exactement l'opposé de l'approche this , originaire de Paul Irish:

@font-face {
    font-family: 'ChunkFiveRegular;
    src: url('whatever source');
    font-weight: normal;
    font-style: normal;
}

L'approche de Paul Irish permet (lire: nécessite) de définir des poids et des italiques plus tard dans le CSS, mais le résultat est "faux": comme le navigateur n'a pas toutes les polices de la famille, il doit calculer le poids et la forme du personnages seuls pour compenser cela. La force unique et limitée de l'approche de Paul est qu'elle pourrait réinitialiser la police sur tous les navigateurs - mais cela dépend de la police utilisée - car tous les navigateurs rendent les polices différemment!

J'aime mieux l'approche de Microsoft, car elle permet de spécifier le font-stylele sable font-weights dont vous avez besoin, et le navigateur affichera le fichier de police correct, au lieu de calculer les fausses tailles, les gras et les italiques. Cependant, il vous oblige à fournir un fichier de police pour chaque variation de police dans la famille que vous utiliserez.

En fin de compte, tout se résume à la police que vous utiliserez et à la façon dont vous l'utiliserez (différents poids, italiques, etc.). Quelle que soit l'approche que vous choisissez, je recommande, d'après ma propre expérience (et Paul recommande aussi) d'utiliser le générateur de polices de caractères de FontSquirrel pour tous vos efforts de typographie Web. FontSquirrel peut réduire considérablement les tailles de police, en omettant les jeux de caractères inutiles, en compressant les polices, etc.

27
pilau

Bien que l'approche de base soit logique, les navigateurs semblent avoir des difficultés avec elle, apparemment causée par leur traitement différent des données de police. Il semble que ce qui suit est le moyen le plus efficace d'utiliser différents poids de Segoe UI:

  1. pour la lumière, utilisez font-family: Segoe UI Light
  2. pour régulier, utilisez simplement font-family: Segoe UI
  3. pour semi-gras, utilisez use font-family: Segoe UI Semibold
  4. en gras, utilisez font-family: Segoe UI; font-weight: bold

C'est désordonné et illogique, mais cela fonctionne sur Firefox, Chrome, IE, Opera, Safari (testé sur Win 7).

Sur les pages Web, il est probablement préférable d'essayer de trouver une police gratuite appropriée avec différents poids et de l'utiliser via @font-face. Après tout, Segoe UI est loin d'être universel, et il n'y a pas de moyen simple de configurer des solutions de secours appropriées.

8
Jukka K. Korpela
@font-face {
    font-family: 'Segoe UI';
    src: url('./ui/segoeui.eot');
    src: local("Segoe UI"),
         local("Segoe"),
         local("Segoe WP"),
         url('./ui/segoeui.eot?#iefix') format('embedded-opentype'),
         url('./ui/segoeui.woff') format('woff'),
         url('./ui/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Semibold';
    src: url('/semibold/seguisb.eot');
    src: local("Segoe Semibold"),
         local("Segoe WP Semibold"), 
         url('/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
         url('/semibold/seguisb.woff') format('woff'),
         url('/semibold/seguisb.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/bold/segoeuib.eot');
    src: local("Segoe Bold"),
         local("Segoe WP Bold"),
         url('/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */
         url('/bold/segoeuib.woff') format('woff'),
         url('/bold/segoeuib.svg#SegoeUIBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Light';
    src: url('/light/segoeuil.eot');
    src: local("Segoe UI Light"),
         local("Segoe WP Light"),
         url('/light/segoeuil.eot?#iefix') format('embedded-opentype'),
         url('/light/segoeuil.woff') format('woff'),
         url('/light/segoeuil.svg#SegoeUILight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Télécharger:

https://github.com/KingRider/frontcom/tree/master/css/fonts

5
KingRider