Comment faire pour utiliser la police-poids avec la police des polices?

J'en ai deux fichiers de police comme: la POLICE de la lumière et de la POLICE en gras. Les deux viennent de @font-face kit de sorte que chaque version a comme 5 fichiers de police inclus (OGV, TTF, WOFF, EOT).

Pour aller de la lumière version audacieuse version que j'ai utiliser font-family: FONT-light; et puis font-family: FONT-bold;. Je veux utiliser font-weight: light; et font-weight: bold; au lieu de cela car j'en ai besoin pour les transitions CSS3. Comment puis-je y parvenir?

InformationsquelleAutor Atadj | 2012-04-06
  1. 39
    @font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

    Du tutoriel: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

    InformationsquelleAutor developdaly
  2. 9

    D'utiliser le font-weight et la font-style propriétés sur les polices intégrées (@font-face) n'est pas si simple. Il y a quelques éléments que vous devez vous préoccuper.

    1 - @font-face Syntaxe:

    La syntaxe est très important d'utiliser la police sur tous les navigateurs. Paul Irish, avec de nombreuses ressources, a écrit le 'épreuve des Balles Syntaxe', comme indiqué ci-dessus, qui a été amélioré à plusieurs reprises:

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

    Cette version (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/, recherchez "Le Fontspring @font-face syntaxe'), est le plus récent et fonctionne à partir de IE6, sur iOS, Android. Il est important de prendre un coup d'oeil sur le lien pour en savoir bien pourquoi il devrait être écrit de cette façon.

    2 - les propriétés de la Police comme font-weight et font-style

    Si vous voulez, c'est possible d'appliquer la font-weight et font-style sur le @font-face déclaration à utiliser les variations de la même police, mais vous devez être spécifiques et précises sur ces caractéristiques. Il ya quelques façons de le faire.

    2.1 - Utilisation d'une police de la famille à chaque variation

    À l'aide de la 'épreuve des Balles Syntaxe', en supposant que vous voulez charger le "Normal", 'Gras' et 'Italique' variations, nous avons:

    @font-face {
  font-family: 'FONT-NAME-normal';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME-bold';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME-italic';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

    Ainsi, l'utilisation de la variation que vous voulez, vous devez appeler le font-family qui correspond à elle ET à déclarer sur la règle de la font-weight: normal et font-style: normal. Si vous ne le faites pas, le navigateur peut appliquer la "faux gras/italique' à l'élément qu'ont ces règles par défaut. Le 'faux' style des œuvres de forcer l'élément à être montré avec elle, même si c'est déjà l'utilisation de l'italique ou le gras. Le problème, c'est que la police a toujours l'air laid parce que n'est pas la voie qui a été fait pour regarder.

    La même chose se produit lorsque vous définissez un "Normal" de police, par exemple, sur un <p> élément et, à l'intérieur, vous placez un <strong> ou <em>. Le <strong> et <em> force le gras/italique de la police. Pour éviter cela, vous devez appliquer la bonne font-family, destinée ne l'être gras/italique, avec une règle pour <strong> et <em>, avec leurs propriétés respectives (font-weight et font-style) mis à normal:

    strong {
  font-family: 'FONT-NAME-bold';
  font-weight: normal;
  font-style: normal;
}

em {
  font-family: 'FONT-NAME-italic';
  font-weight: normal;
  font-style: normal;
}

    Mais il y a un problème avec elle. Si vos polices ne se charge pas de la base choisie aura perdu de leur poids/styles. Cela nous amène à la prochaine.

    2.2 - en Utilisant la même police-nom de famille, mais de poids différents et des styles de

    Cette méthode est plus simple à gérer par le biais de plusieurs poids et de styles, et des issues correctement si vos polices ne se charge pas. En utilisant le même exemple:

    @font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

  font-weight: normal;
  font-style: italic;
}

    Dans cette méthode, le poids et les styles dans la @font-face déclarations agir comme des “marqueurs”. Lorsqu'un navigateur rencontre ceux de graisses et de styles ailleurs dans le CSS, il sait qui @font-face déclaration à l'accès et à laquelle la variation de la police à utiliser.

    Assurez-vous si votre poids et de styles de match. Si donc, lorsque vous utilisez un <strong> ou <em> l'intérieur d'un parent qui est à l'aide de la @font-face que vous avez créé, il va charger le droit de la déclaration.

    Dans la source de ces méthodes de stylisation intégré (http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/), une autre méthode qui combine les deux que j'ai cité (la 2.1 et 2.2). Mais il apporte beaucoup de problèmes, y compris la "faux gras/italique', ce qui vous oblige à déclarer à la <strong> le droit font-family et, pour la <em>, classes que des styles de plus, les variations de la font qui diffère dans weight. Je suppose que les deux que j'ai choisi sont assez bons pour faire le travail.

    Sources:
    http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
    http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

    Edit 1:

    Il n'y a pas besoin d'une grande quantité de police extensions. Le .woff type assiste à presque tous les navigateurs, sauf pour IE, si vous avez besoin de donner de l'aide pour IE8 (qui n'accepte que .eot format). (http://caniuse.com/#feat=fontface)

    Autre extrémité qui est peut-être utile, c'est d'intégrer la police sur le CSS à l'aide base64 encodage. Cela permettra d'éviter beaucoup de demandes, mais vous devez vous rappeler qu'il overwight le fichier CSS. Cela peut être manipulé l'organisation de la CSS contenu et les polices de donner la première des règles CSS rapidement dans un fichier de petite taille, délivrant les autres sur un autre fichier CSS, sur la clôture de <body> tag.

    • Si vous gzip les requêtes HTTP, ce qui devrait atténuer les problèmes avec un plus grand fichier CSS.
    InformationsquelleAutor Mateus Leon
  3. 2

    vous pouvez ajouter le numéro de police-poids de la propriété, par exemple pour la version light.

    font-weight: normal; // light version as it is.
font-weight: 700; //makes light version bolder.
    InformationsquelleAutor undefined