Комбинации букв «фи» и «фл» не отображается в браузерах

Question

У меня есть следующие проблемы:

для моего сайта я выбрал WebFont «Fira Sans конденсированной» из Google Fonts (латинские, латинские Extended, кириллица, кириллица Extended). Для создания форматов шрифта я использовал Font Squirrel, который создан для меня файлы с .woff и .woff2 расширений.

Я включил шрифт с следующий CSS-код:

@font-face { 
    font-family: 'firasanscondensed'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/firasanscondensed-regular.woff2') format('woff2'), url('../fonts/firasanscondensed-regular.woff') format('woff'); 
} 

@font-face { 
    font-family: 'firasanscondensed'; 
    font-style: normal; 
    font-weight: 700; 
    src: url('../fonts/firasanscondensed-bold.woff2') format('woff2'), url('../fonts/firasanscondensed-bold.woff') format('woff'); 
} 

body { 
    font-family: 'firasanscondensed', sans-serif; 
} 

Мой контент правильно отображаться для комбинаций букв «фи» и «й», за исключением. Например: «Wi-fi» распространяется как «Wi-».

Чтобы решить эту проблему, я попытался включить шрифт с более шрифтов-расширений (.eot, .ttf) и в другом порядке, но ситуация не изменилась.

Тогда я использовал Google Fonts способ включения: <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">. С помощью этого метода моя проблема решена! Но для меня это в принципе включать шрифты локально.

Я вижу проблему в следующих браузерах: Google Chrome 55.0.2883.87; Mozilla Firefox 51.0.1. В IE10 проблема не появляется!

Спасибо заранее!

Answer 1

Пробуйте это против элемента, в котором отображаются шрифты (или тела).

body { 
    font-feature-settings: "liga" 1; 
} 

Вам может понадобиться префиксы:

body { 
    -webkit-font-feature-settings: "liga" 1; 
    -moz-font-feature-settings: "liga" 1; 
    -ms-font-feature-settings:  "liga" 1; 
    font-feature-settings:   "liga" 1; 
} 

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

• ЛИГА: стандартные лигатуры
• dlig: лигатуры
• onum: старый стиль фигура
• lnum: облицовочные фигур
• tnum: табличные цифры
• ноль: полоснул нулевой
• гидроразрыва : фракции
• sups: верхний индекс
• подлодки: подстрочные
• smcp: небольшие колпачки
• c2sc: малые столиц из столиц
• случай: случай-чувствительные формы
• hlig: исторические лигатуры
• CALT: контекстные чередует
• СтПЦ: Swashes
• HIST: исторические формы
• сс **: стилистические наборы
• ка р-н: кернинге
• locl: Локализованные формы
• rlig: необходимые лигатуры
• MEDI: медиальные формы
• INIT: начальные формы
• ISOL: изолированные формы
• FINA: окончательные формы
• марка: знак
• mkmk: позиционирование по метке

Их можно даже объединить в одно правило:

.element { 
    font-feature-settings:"liga" 1, "dlig" 1; 
}