Font-weight Transition CSS dans Chrome

Le problème est que la police de poids, représenté numériquement, ce doit être un multiple de 100. Pour animer entre 400 et 600, la police allait changer de 400 à 500 à 600 (3 'frames', si vous le souhaitez) et n'a pas l'air très lisse. Une animation à ne pas augmenter le poids de 1 à chaque fois (400, 401, 402...), on pourrait augmenter le poids par 100 (400, 500, 600). Si votre animation a duré 2 secondes, après 1 seconde, le poids serait soudainement devenu 500, et après 2 secondes, le poids serait soudainement devenu 600; il n'y a pas d'entre-deux variations.

Un autre problème avec ce que vous êtes de tenter ici, c'est que la police que vous utilisez (ou JSFiddle par défaut, au moins) n'a rien de différent pour font-weight:500, sens la valeur par défaut est de 400:

<p style="font-weight:400;">a - 400, normal</p>
<p style="font-weight:500;">a - 500 (no support, defaults to 400)</p>
<p style="font-weight:600;">a - 600 (bold)</p>
<p style="font-weight:650;">a - 650 (not valid, defaults to 400)</p>

http://jsfiddle.net/r4gDh/6/

Numérique de police de poids pour les polices de fournir plus que normal et gras. Si le poids exact de donnée n'est pas disponible, alors 600-900 le plus proche disponible plus sombre de poids (ou, à défaut, le plus proche d'un poids plus léger), et de 100 à 500 utilisation la plus proche d'un poids plus léger (ou, si aucun n'est, le plus proche disponible plus sombre de poids). Cela signifie que pour les polices qui ne fournissent que des normaux et gras, 100-500 sont normales, et 600-900 sont en gras.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Cela signifie que vous ne pouvez pas en douceur animer font-weight. Même si vous aviez le soutien pour tous les poids entre 100 et 900 le changement ne serait pas agréable et il y aurait un changement radical entre 500 et 600 (où poids plus léger rencontre plus sombre de poids).

OriginalL'auteur James Donnelly

Les polices ne sont pas de simples vecteurs de collections d'images (c'est pourquoi les polices svg n'a jamais décollé). Les polices Opentype incluent toutes sortes de magie pour la fixation de polices sur la grille de pixels, ce qui fait qu'il est irréaliste de s'attendre à une famille de polices à toujours inclure tous les possibles de la valeur de poids.

Parce que les polices ne sont pas de simples vecteurs de collections d'images, ils ne sont jamais redimensionner de façon linéaire, il y aura des bosses de prendre de la grille de pixels en compte.

Google livre blanc explique pourquoi linéaire de redimensionnement ne fonctionne pas pour le texte courant sur les écrans
https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M/edit

c'est pourquoi aucun navigateur va essayer et ils reposent tous sur la pré-calculée de la police de poids.

Qui peut changer en une décennie, lorsque les écrans de la rétine sont le plus petit dénominateur commun, mais la police de caractères courante tech cibles actuelles des écrans.

Ce livre blanc de Microsoft documents, police standard, les valeurs de poids
http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-components-postattachments/00-02-24-90-36/WPF-Font-Selection-Model.pdf

(mais juste parce qu'ils sont documentés ne signifie pas que le nombre de polices comprennent, en fait, tous d'entre eux n'est pas assez petit)

Vous pouvez probablement obtenir l'effet que vous voulez avec une svg de police et un peu de javascript. Le svg police va être de la merde pour du texte utiliser.

OriginalL'auteur nim

Me semble que j'ai obtenu un "font-weight" effet de transition par hasard, en faisant une rapide transition de couleur (gris clair à bleu foncé) en même temps.

OriginalL'auteur Rolf

J'ai peaufiné @Idra du violon pour faire de la normale en gras transition un peu plus lisse. Voici le violon: http://jsfiddle.net/y7rLwx95/

Changements... Puisque la largeur du texte obtiendrez plus large, quand on va en gras, j'ai ajouté un premier "étirer" la transition par l'augmentation de l'espacement entre les lettres:

.element:hover {
   letter-spacing: 0.9px;
   transition: all .3s linear;
}

Ensuite retarder la décoloration dans le gras ::avant d'élément:

.element:hover::before {
   opacity: 1;
   transition-delay: .2s
}

Également certains des réglages supplémentaires ici:

.element::before {
   transition: all .3s linear;  /* replace */
   letter-spacing: 0;           /* additional */
}

Le calendrier de transition est juste tout ce qui se sent le droit de me. L'idée originale de @Idra posté est important pour moi. J'accepte le fait que les largeurs de devrait être différentes entre le normal et gras, comme c'est l'intention de police différente poids. Si vraiment le défi, à mon humble avis, est de comprendre comment aller entre les 2 ressemble à une surface lisse, pas de secousses. Cela semble être la meilleure solution, pour l'instant j'ai trouvé.

OriginalL'auteur Michael Chen