Font-Weight CSS Transition в Chrome

Ответ 1

В настоящее время анимация шрифтов не поддерживается в Chrome и IE-10 на основе многочисленных тестов. Это может измениться в будущем.

Ответ 2

Проблема заключается в том, что вес шрифта, если он представлен численно, должен быть кратным 100. Чтобы оживить от 400 до 600, шрифт изменился бы с 400 до 500 на 600 (3 'фреймы, если хотите) и wouldn "Я выгляжу очень гладко. Анимация не увеличивала бы вес на 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 (где более легкий вес соответствует более темному весу).

Ответ 3

Шрифты - это не простые коллекции векторных изображений (почему svg шрифты никогда не снимались). Шрифты 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 будет испорченным для использования текста.

Ответ 4

Кажется, я случайно получил эффект перехода "font-weight", выполнив быстрый переход цвета (от светло-серого до темно-синего) в то же время.

Ответ 5

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

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

Вот как увеличить вес:

.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;
}

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

Ответ 6

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

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

Здесь вы можете увидеть демо:
http://jsfiddle.net/r4gDh/45/

HTML:

<div class="element" data-text="text will turn to bold on hover">
  text will turn to bold on hover
</div>

В 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;
}

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

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

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

Ответ 7

Существует простой способ создания более плавного перехода.

• Начните с более легкого шрифта (например, 300) и перехода к более смелым font-weight (например, 700)
• Измените шрифт на шрифт webfont или Google.
• Добавить '-webkit-font-smoothing: antialiased;' для поддержки краев переходов шрифта

Протестировано в Chrome и Mozilla

Ура!

a {
  font-family: sans-serif;
  font-style: normal;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -mox-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.element a {
  font-weight: 300;
  font-size: 40px;
  line-height: 100px;
  text-align: center;
}

.element a:hover {
  font-weight: 700;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

<div class="element"><a href="#" onclick="location.href='http://udundi.com'; return false;">udundi</a></div>