Сочетания букв fi и fl не отображаются браузерами

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

для своего веб-сайта я выбрал веб-шрифт 'Fira Sans Condensed' из Google Fonts (латиница, расширенная латиница, кириллица, расширенная кириллица). Для генерации форматов шрифтов я использовал 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;
}

Мой контент отображался корректно, за исключением комбинаций букв "fi" и "fl". Например: «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; Мозилла Фаерфокс 51.0.1. В IE10 проблема не проявляется!

Заранее спасибо!


html fonts css webfonts google-webfonts
person Dmitry S.    schedule 16.02.2017    source источник
comment
Извините, я использовал фрагмент, чтобы вставить css-code.   -  person Dmitry S.    schedule 16.02.2017

Ответы (2)


arrow_upward
1
arrow_downward

Общие лигатуры активированы по умолчанию, но некоторые шрифты их не поддерживают. Попробуйте отключить их с помощью font-feature-settings:"liga" 0; Мне помогло.

person Andreas    schedule 28.05.2018
comment
Это ответ. Проблема заключается в том, что шрифт не поддерживает стилистические орфографические лигатуры. - person JonM; 29.03.2021

arrow_upward
0
arrow_downward

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

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: дискреционные лигатуры
  • онум: фигуры в старом стиле
  • lnum: фигурки на подкладке
  • tnum: табличные данные
  • ноль: перечеркнутый ноль
  • дробь: дроби
  • надстрочный индекс
  • подписки: нижний индекс
  • smcp: маленькие заглавные буквы
  • c2sc: маленькие заглавные из заглавных
  • case: чувствительные к регистру формы
  • hlig: исторические лигатуры
  • calt: контекстные альтернативы
  • шшш: шлепки
  • история: исторические формы
  • ss**: стилистические наборы
  • керн: кернинг
  • locl: локализованные формы
  • rlig: обязательные лигатуры
  • меди: медиальные формы
  • инициализация: начальные формы
  • isol: изолированные формы
  • Фина: окончательные формы
  • отметка: отметка
  • mkmk: позиционирование от метки к метке

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

.element {
  font-feature-settings:"liga" 1, "dlig" 1;
}
person mayersdesign    schedule 16.02.2017
comment
Спасибо за ответ, но это не помогает. Я пробовал разные комбинации свойства font-feature-settings. - person Dmitry S.; 16.02.2017