CSS: отключить лигатуры шрифтов во всех браузерах

Question

Поскольку шрифты Google заблокированы в Китае, мне пришлось загрузить их и использовать FontSquirrel для конвертации.

Проблема: фи / фф / тд уродливы

Я сделал все шаги здесь Предотвращение лигатур в Safari (Mavericks/iOS7) через CSS, но без сигары.

Как я могу отключить лигатуры сразу?-webkit-font-variant-ligatures: no-common-ligatures;Не работает

Answer 1

Несмотря на no-common-ligatures Вы можете попробовать такие значения, как none, unset или же no-contextual, Смотрите MDN для всех возможных значений.

Также это должно поддерживаться во всех современных браузерах.

Answer 2

По сути тот же ответ, что предложил andreas, но вот полный CSS для удобства:

* {
font-variant-ligatures: none;
}

Answer 3

Не знаю почему, но я обнаружил ситуацию, когда Chrome нужны оба свойства:

      body {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

Если установить только один из них, лигатуры не будут отключены.

Answer 4

Отсутствие эффекта в Safari от font-variant-ligatures (см. комментарий к принятому ответу выше) использовали

      font-feature-settings: "liga" 0;

которую соблюдают и Safari, и Chrome.

Answer 5

1. Вы можете закомментировать строку в вашем CSS как:

   @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
   

2. Затем откройте URL сверху в браузере, вы получите файл CSS, как показано ниже:

   /* latin */
   @font-face {
     font-family: 'Source Sans Pro';
     font-style: italic;
     font-weight: 300;
     src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/fpTVHK8qsXbIeTHTrnQH6MAjkyiewWYrWZc50I8hK7I.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
   }
   

3. Загрузите каждый шрифт, указанный в URL каждого блока, и вставьте его в свои ресурсы.

4. Сохранить CSS в ваших ресурсах (скажем, google-fonts.css) после изменения URL (относительно вашего каталога ресурсов).

Теперь ваше приложение будет использовать шрифты Google того же происхождения, и вы не почувствуете никакой разницы.