0

Объясните, пожалуйста, правильный порядок подключения шрифта разного формата (eot, woff, woff2, otf, ttf, svg, local).

в основном порядок тот в котором я перечислил выше, но на https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ru порядок обратный.

вроде бы в итоге браузер выбирает только один формат, но влияет ли порядок подключения шрифтов на то, на каком шрифте он остановится?

1 ответ 1

1

Браузер отобразит первый поддерживаемый формат шрифта (на приведённом вами сайте есть эта информация). Так что порядок не важен. Ниже немного модифицированный вариант, взятый из спецификаций W3C:

@font-face {
    font-family: 'FiraSansRegular';
    src: local('Fira Sans Regular'),
         url('/demo3/templates/nevado/fonts/FiraSansRegular/FiraSansRegular.eot'),
         url('/demo3/templates/nevado/fonts/FiraSansRegular/FiraSansRegular.eot?#iefix') format('embedded-opentype'),
         url('/demo3/templates/nevado/fonts/FiraSansRegular/FiraSansRegular.woff') format('woff'),
         url('/demo3/templates/nevado/fonts/FiraSansRegular/FiraSansRegular.ttf') format('truetype'),
         url('/demo3/templates/nevado/fonts/FiraSansRegular/FiraSansRegular.svg#FiraSansRegular') format('svg');
    font-style: normal;
    font-weight: normal;
}

Я использую его. Рекомендую также для прочтения статью на htmlbook.ru.

2
  • Иногда, svg-шрифт можно перенести перед woff шрифтом. Не все сторонние шрифты хорошо смотрятся и сглаживаются в хроме, а SVG-шрифты всегда отлично.
    – IonDen
    Commented 26 авг. 2015 в 14:26
  • Не замечал, но не исключаю. Commented 26 авг. 2015 в 16:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.