CSS font-face -when для использования нескольких дескрипторов src - PullRequest
Новая
       9

CSS font-face -when для использования нескольких дескрипторов src

0 голосов
/ 22 апреля 2019

Допустим, я объявляю собственный шрифт, например: 

@font-face {
    font-family: "Avenir Next";
    src: local("Avenir Next"),
    url('./fonts/avenir-next-bold.woff2') format('woff2'),
    url('./fonts/avenir-next-bold.woff') format('woff');
}

Когда мне следует использовать несколько дескрипторов src вместо одного?

Например, я нашел этот пример в сети, который использует 2 src дескрипторы. Почему он использует 2 вместо 1? 

@font-face {
  font-family: FontName;
  src: url('path/filename.eot');
  src: url('path/filename.eot?#iefix') format('embedded-opentype'),
    url('path/filename.woff2') format('woff2'), 
    url('path/filename.woff') format('woff'),
    url('path/filename.ttf') format('truetype');
}

1 Ответ

0 голосов
/ 22 апреля 2019

CSS font-face -when для использования нескольких дескрипторов src

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

Это похоже на то, как браузер использует стек шрифтов в свойстве 

font-family

.

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

CSS уже разработан, чтобы помочь минимизировать время загрузки и количество запросов благодаря этому последовательному подходу.Если ваши шрифты слишком долго приходят с вашего собственного сервера, рассмотрите возможность использования быстрой CDN, такой как Google Web Fonts, Typekit или Adobe Edge.

...