CSS-переход шрифтового веса в Chrome

Пытаясь получитьfont-weight изящно перейти от400' к600' используя CSS, но это не такПохоже, что работает в Chrome. Это известная ошибка или я что-то не так делаю?

Проверьте скрипку здесь для примера

 Funktr0n19 мая 2013 г., 01:01
хммм ... Это похоже на работу в Firefox / Opera. Досадно ...
 Rolf20 янв. 2014 г., 03:48
Ах, неважно, этоэто визуальный эффект, потому что яЯ делаю переход на цвет тоже. Если вы делаете переход по цвету (например, с серого на синий) и одновременно переключаетесь на полужирный, переход выглядит плавным.
 Rolf20 янв. 2014 г., 03:40
Я, кажется, получаю переход на font-weight при установке перехода: все ... (Chrome, FF и IE11) ОК ... это выглядит как переход для быстрых переходов. Попробуйте .25s
 aspirinemaga19 мая 2013 г., 00:51
было бы неплохо показать нам, что тымы сделали так, чтобы мы могли проанализировать ваш код, чтобы определить, сделали ли вы что-то неправильно или нет
 Funktr0n19 мая 2013 г., 00:52
там'скрипка
 Niet the Dark Absol19 мая 2013 г., 01:00
Это нев IE10 тоже не работает.font-weight должен быть анимируемым, но яя не уверен, что любой браузерS движок рендеринга шрифтов поддерживает это.

Ответы на вопрос(7)

Решение Вопроса

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

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

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

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

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

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

 Hardip Patel27 июл. 2018 г., 04:41
Хороший друг! Вы можете немного увеличить размер шрифта, если тень заполняет счетчики.
 Adrian05 мар. 2018 г., 15:49
ура, для других читателей, стоит поиграть с 1px и изменить на .3px или .4px и т. д. при необходимости

мы подправили @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 (гделегкий вес отвечаеттемный вес).

 James Donnelly19 мая 2013 г., 01:34
Единственное отличие, которое я вижу между Firefox и Chrome, заключается в том, что Chrome применяетсяfont-weight:600 в начале анимации, и Firefox применяет его в конце.
 Funktr0n19 мая 2013 г., 01:54
да, если вы сделаете это с Open Sans и сократите время до 300 мс, это на самом деле выглядит довольно прилично (в FF). Во всяком случае, отстой, что они неПоддерживаю его в Chrome. Спасибо, что уделили время.
 Funktr0n19 мая 2013 г., 01:38
Даже если вы измените шрифт на известное надежное семейство и установите для состояния без наведения значение «100' и зависли в весе900', он все еще применяет 900 сразу, что означает, что этот переход, скорее всего, нет поддерживается.
 Funktr0n19 мая 2013 г., 01:33
В Chrome этоне анимация вообще, но в FF / Opera это анимация. "Плавность» это вопрос относительности, и пока я слышу, что выповторяю (и читаю исходные документы, на которые вы ссылались), я нене думаю, чтоЗдесь проблема. Я думаю это's в настоящее время не поддерживается в Chrome / IE10.
 James Donnelly19 мая 2013 г., 01:48
Chrome Canary делает то же самое, что и стабильная версия, так чтоs либо дизайнерское решение не реализовывать его, либо ошибка. Я'представьОднако, скорее всего, это скорее дизайнерское решение, чем что-либо еще. Я'Мы обновили ваш JSFiddle для использования шрифта с поддержкой 400, 500 и 600, и переходы между каждым изменением веса хорошо видны (с помощью Firefox):jsfiddle.net/r4gDh/9

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

Ваш ответ на вопрос