'Segoe UI' police avec font-face & amp; local
Je veux utiliser le "Segoe UI" de la police dans un site web si elle est installée dans l'ordinateur de l'utilisateur.
Je l'ai déclaré à tous les styles avec @font-face
afin d'utiliser le font-weight
la propriété de changer l'épaisseur de la police (il est vraiment cool!).
Le problème est que je ne peut pas le faire travailler avec Segoe UI Bold (je pense que le nom est mal). Une idée?
Ici un exemple. (4) et (5), serait le même: 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>
source d'informationauteur Daniel G. Blázquez
Vous devez vous connecter pour publier un commentaire.
C'est à partir de Microsoft feuille de style pour Windows 8 (Métro) applications:
L'approche ci-dessus fonctionne pour moi et c'est aussi l'approche utilisée par Ouvert Sans et Google polices. Cependant, il est l'exact opposé de cette approche, à l'origine de Paul Irish:
Paul Irish approche permet (lire:) réglage du poids et de l'italique, plus tard, dans le CSS, mais le résultat est "faux": Depuis le navigateur ne dispose pas de toutes les polices de la famille, il doit calculer le poids et la taille des caractères sur son propre pour qui. L'unique et limité de la force de Paul approche est qu'il pourrait réinitialiser la police sur tous les navigateurs -, mais cela dépend de la police utilisée, parce que tous les navigateurs rendre les polices différemment!
J'aime Microsoft la meilleure approche, car elle permet de préciser les
font-style
s etfont-weight
s dont vous avez besoin, et le navigateur affiche le bon fichier de police, au lieu de l'informatique faux tailles, en gras et en italique. Cependant, il ne vous oblige à fournir un fichier de police pour chaque variation de la police dans la famille que vous allez utiliser.En fin de compte, tout se résume à ce que la police que vous allez utiliser et la façon de l'utiliser (poids différentes, italique, etc). Indépendamment de ce que vous allez faire, je vous recommande de ma propre expérience (et de Paul recommande trop) d'utiliser FontSquirrel du font-face generator pour tous vos typographie web entreprises. FontSquirrel pouvez réduire considérablement la taille de la police, en laissant de côté les inutiles, les jeux de caractères, en comprimant les polices de caractères, et ainsi de suite.
Bien que l'approche de base est logique, les navigateurs semblent avoir des difficultés avec elle, apparemment causée par leurs différents de traitement de données de police. Il semble que celui-ci est le moyen le plus efficace de l'aide de différents poids de Segoe UI:
font-family: Segoe UI Light
font-family: Segoe UI
font-family: Segoe UI Semibold
font-family: Segoe UI; font-weight: bold
C'est salissant et illogique, mais il fonctionne sur Firefox, Chrome, IE, Opera, Safari (testé sur Win 7).
Sur des pages web, il est probablement mieux d'essayer de trouver une police libre de différents poids et l'utiliser via
@font-face
. Après tout, Segoe UI est loin d'être universelle, et il n'y a pas de moyen simple d'convient de base.Télécharger:
https://github.com/KingRider/frontcom/tree/master/css/fonts
À utiliser Segoe UI de la Lumière dans votre page, utilisez ce
CSS { font-family: "Segoe UI"; font-weight: lighter; }