Я пришел сюда, чтобы узнать ответ о том, как изменить вес шрифта, и был разочарован, когда прочитал утвержденный ответ выше, сказав, что он может 'сделать (или, по крайней мере, не очень хорошо).

С недоступной анимацией веса шрифта я решил попробовать другой эффект, который фактически дает вам эффект веса шрифта ... который я не сделалЯ даже не думаю, что будет работать для этого типа перехода.

Вот как заставить вес расти:

.weightGrow:hover {
    text-shadow:
    -1px -1px 0 #2DD785,
    1px -1px 0 #2DD785,
    -1px 1px 0 #2DD785,
    1px 1px 0 #2DD785;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

Идеально гладко и именно то, что я искал, когда впервые попал на эту страницу. Надеюсь, это кому-нибудь поможет.

мы подправили @Idra 's, чтобы сделать переход от нормального к жирному немного более плавным. Вот'S скрипка:http://jsfiddle.net/y7rLwx95/

Изменения ... Поскольку при выделении жирным шрифтом ширина текста будет шире, ямы добавили инициалпротяжение" переход по увеличению межбуквенного интервала:

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

Затем задержал появление элемента bold :: before:

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

Также здесь есть несколько дополнительных настроек:

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

Время перехода - это то, что мне кажется правильным. Оригинальная идея, опубликованная @Idra, важна для меня. Я принимаю тот факт, что ширинадолжен отличаться от нормального и жирного, как это 's цель различных весов шрифта. Так что, действительно, задача, IMHO, состоит в том, чтобы выяснить, как пройти между двумя взглядами плавно, без зазоров. Похоже, это лучшее решение для менянашел.

Шрифты не являются простыми коллекциями векторных изображений (которыеs sgg шрифты никогда не снимаются). Шрифты Opentype включают в себя все виды магии для закрепления шрифтов на пиксельной сетке, что делает нереалистичным ожидать, что семейство шрифтов будет когда-либо включать все возможные значения веса.

Поскольку шрифты не являются простыми коллекциями векторных изображений, они также никогда не изменят линейный размер. будут неровности, чтобы учесть пиксельную сетку.

Этот технический документ Google объясняет, почему линейное изменение размера не работает для текста на текущих экранахhttps://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M/edit

поэтому ни один браузер не попытается это сделать, и все они будут полагаться на предварительно вычисленные веса шрифтов.

Это может измениться за десятилетие, когда сетчатка отображает самый низкий общий знаменатель, но текущая технология шрифта нацелена на текущие экраны.

Этот технический документ Microsoft описывает некоторые стандартные значения веса шрифтаhttp://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-components-postattachments/00-02-24-90-36/WPF-Font-Selection-Model.pdf

(но только то, что они задокументированы, не означает, что количество шрифтов, которые фактически включают все из них, не совсем мало)

Вы можете достичь желаемого эффекта с помощью шрифта svg и некоторого JavaScript. Шрифт SVG будет дерьмом для использования текста, хотя.

Хотя прямого перехода шрифта-веса к плавному переходу не существует, я нашел способ сделать это косвенно (хотя и с некоторыми ограничениями).

По сути, вы можете просто использовать один из псевдоэлементов, чтобы сделать зеркальную копию элемента, шрифт которого вы хотите перевести на жирный, где font-weight на псевдоэлементе выделен жирным шрифтом, а непрозрачность равна 0. И при наведении просто перевести псевдоэлементс непрозрачностью, и это делает трюк с очень плавным переходом.

Вы можете увидеть демо здесь:

http://jsfiddle.net/r4gDh/45/

HTML:

  text will turn to bold on hover

В HTML вы уже можете увидеть одно из ограничений, потому что мы используем псевдоэлементы, нам нужно также передать содержимое элемента в качестве атрибута, чтобы содержимое дублировалось.

CSS:

.element,
.element::before {
    background: red;
    font-weight:normal;
    font-size:40px;

    text-align:center;

    display: inline-block;

    padding: 0px 30px 0px 30px;

    position: relative;
    top: 0;
    left: 0;
}
.element::before {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    content: attr(data-text);
    opacity: 0;

    font-weight: bold;

    transition: all 1s linear;
}
.element:hover::before {
    opacity: 1;
}

Второе ограничение проистекает из природы метода, а именно потому, что вы просто накладываете псевдоэлемент поверх оригинала, тогда элемент должен иметь сплошной фон, иначе это не будет работать, поскольку исходный элемент останется видимым на заднем плане.

Одна вещь, на которую вы действительно должны обратить внимание, это то, что псевдоэлемент и исходный элемент имеют одинаковые размеры, для этого, в демо, яМы удалили заполнение псевдоэлемента, поэтому вам может потребоваться сделать что-то подобное.

Как вы можете видеть, этот способ получения перехода между шрифтом и весом не обходится без него ».Проблемы и далеки от идеальных, но это лучшее, что я могу себе представить, и в некоторых случаях, например, для кнопок, и что не очень полезно, и если все сделано правильно, будет выглядеть достойно даже в устаревших браузерах.

Проблема заключается в том, что веса шрифта, если они представлены численно, должны быть кратны 100. Для анимации между 400 и 600 шрифт изменится с 400 до 500 на 600 (3 'кадры, если хотите) и невыглядит очень гладко. Анимация неt увеличивать вес на 1 каждый раз (400, 401, 402 ...) он будет увеличивать вес на 100 (400, 500, 600). Если ваша анимация длилась 2 секунды, через 1 секунду вес внезапно станет 500, а через 2 секунды вес внезапно станет 600; нет никаких промежуточных изменений.

Еще одна проблема с тем, что выВы пытаетесь здесь, что шрифт, который выиспользовать (или JSFiddle 'по умолчанию, по крайней мере) нене иметь ничего другого дляfont-weight:500Это означает, что по умолчанию это 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/

Числовые веса шрифтов для шрифтов, которые предоставляют больше, чем просто нормальный и жирный шрифт. Если точный приведенный вес недоступен, то 600-900 используют ближайший доступный более темный вес (или, если его нет, ближайший доступный более легкий вес), а 100-500 используют ближайший доступный более легкий вес (или, если его нет) ближайший доступный темный вес). Это означает, что для шрифтов, которые предоставляют только нормальный и жирный шрифт, 100-500 являются нормальными, а 600-900 - жирным шрифтом.

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

Это в основном означает, что вы можетет плавно анимироватьfont-weight, Даже если бы у вас была поддержка всех весов от 100 до 900, изменение бы небыло бы приятно, и было бы резкое изменение между 500 и 600 (гделегкий вес отвечаеттемный вес).

Я, кажется, получил "начертание шрифта» Эффект перехода происходит случайно, одновременно делая быстрый цветовой переход (от светло-серого к темно-синему).