Изменяемый стиль шрифта в текстовых дорожках в HTML5 Видео через CSS

Question

Я пытаюсь изменить font-variation-settings в теге b, который я поместил в файл субтитров, который вызывается внутри элемента track, который является дочерним для элемента video:

Файл HTML:

    <video controls width="640" src="/media/friday.mp4">
      <track default kind="captions" srclang="en" src="/media/friday.vtt">
    </video>

файл VTT:

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <b.strongish>lord of the universe</b> in?

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

:root {
  --wght: 400;
  --mono: 0;
}

video::cue {
  font-variation-settings: "wght" var(--wght), "MONO" var(--mono);
  font-family: "Recursive", sans-serif;
}

video::cue(b.strongish) {
  --mono: 1;
}

Идея состоит в том, что при изменении значения --mono в классе .strongish это переопределит значение, установленное на ::root, при сохранении ранее установленного значения для --wght.

Это работает, когда я использую его для стилизации любого другого тега HTML, но не внутри video::cue. Проблема не в свойстве font-variation-settings, потому что, если я установлю его вручную, без переменных CSS, оно будет работать нормально (например, font-variation-settiongs: 'MONO' 1;).

Не работают ли CSS переменные в субтитрах? Если они это сделают, кто-нибудь может указать мне, что я делаю неправильно?

Answer 1

font-variations-settings применяется к элементу video::cue и будет применять значения wght и MONO, как они были в то время для себя и его дочерних элементов.

Но в дочернем элементе b.strongish video::cue не устанавливается font-variations-settings. Поэтому, даже если вы правильно установили --mono: 1;, нет font-variations-settings, чтобы на самом деле подобрать эту измененную переменную, поэтому изменение не имеет никакого эффекта.

Вы можете попробовать изменить этот бит:

video::cue {
  font-variation-settings: "wght" var(--wght), "MONO" var(--mono);
  font-family: "Recursive", sans-serif;
}

to:

video::cue,
video::cue * {
  font-variation-settings: "wght" var(--wght), "MONO" var(--mono);
  font-family: "Recursive", sans-serif;
}

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

Дайте мне знать, если это работает.

Кстати, довольно круто наткнуться на вопрос, который ссылается на пост на моем сайте, спасибо! : -)