объявление @ font-face для Amstelvar (переменный шрифт itali c) - PullRequest
Новая
       61

объявление @ font-face для Amstelvar (переменный шрифт itali c)

0 голосов
/ 26 апреля 2020

Как правильно определить @font-face объявления для Amstelvar itali c (переменный) шрифт?

Вот декларации граней шрифтов, которые я использовал: 

@font-face {
    font-family: 'Amstelvar';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url('amstelvar-roman.woff2') format('woff2-variations'),
      url('amstelvar-roman.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Amstelvar';
    font-weight: 100 900;
    font-display: swap;
    font-style: oblique 0deg 10deg;
    src: url('amstelvar-italic.woff2') format('woff2-variations'),
      url('amstelvar-italic.woff2') format('woff2');
  }

Добавьте этот класс, который я применяю к тексту c: 

.italic {
  font-style: italic,

  @supports (font-variation-settings: normal): {
    font-variation-settings: 'slnt' -10,
    font-style: oblique 10deg,
  }
}

Вот пример в реальном времени . Слово itali c должно быть выделено курсивом в заголовке «Тестовая страница с курсивом и жирным шрифтом», но, к сожалению, оно не имеет никакого эффекта.

1 Ответ

1 голос
/ 27 апреля 2020

Написал это в твиттере, но решил добавить и сюда:

Обнаружил несколько вещей: подмножества Амстелвара потеряли свои оси изменения, поэтому не ведут себя должным образом. Кроме того: он имеет ось itali c и не наклонен, а поскольку roman / itali c являются отдельными файлами, вы можете просто использовать группировку по семейству и стиль шрифта: itali c Посмотрите: https://codepen.io/jpamental/pen/wvKdmPp

@font-face {
  font-family: 'Amstelvar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2),
  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2) format('woff2');
}

@font-face {
  font-family: 'Amstelvar';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2),
  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2) format('woff2');
}
em {
  font-style: italic;
}
...