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

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

проблема: fi / ff / etc уродливы

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

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

9
css css3 fonts google-font-api ligature

3 ответов

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

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

2

по существу тот же ответ, что Андреас предлагается, но вот полный CSS для удобства:

* {
font-variant-ligatures: none;
}
6

  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 из то же самое происхождение, и вы не почувствуете никакой разницы.

0