CSS: отключить лигатуры шрифтов во всех браузерах
Поскольку шрифты Google заблокированы в Китае, мне пришлось загрузить их и использовать FontSquirrel для конвертации.
Проблема: фи / фф / тд уродливы
Я сделал все шаги здесь Предотвращение лигатур в Safari (Mavericks/iOS7) через CSS, но без сигары.
Как я могу отключить лигатуры сразу?-webkit-font-variant-ligatures: no-common-ligatures;
Не работает
5 ответов
Несмотря на no-common-ligatures
Вы можете попробовать такие значения, как none
, unset
или же no-contextual
, Смотрите MDN для всех возможных значений.
Также это должно поддерживаться во всех современных браузерах.
По сути тот же ответ, что предложил andreas, но вот полный CSS для удобства:
* {
font-variant-ligatures: none;
}
Не знаю почему, но я обнаружил ситуацию, когда Chrome нужны оба свойства:
body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}
Если установить только один из них, лигатуры не будут отключены.
Отсутствие эффекта в Safari от
font-variant-ligatures
(см. комментарий к принятому ответу выше) использовали
font-feature-settings: "liga" 0;
которую соблюдают и Safari, и Chrome.
Вы можете закомментировать строку в вашем CSS как:
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
Затем откройте 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; }
Загрузите каждый шрифт, указанный в URL каждого блока, и вставьте его в свои ресурсы.
- Сохранить CSS в ваших ресурсах (скажем,
google-fonts.css
) после изменения URL (относительно вашего каталога ресурсов).
Теперь ваше приложение будет использовать шрифты Google того же происхождения, и вы не почувствуете никакой разницы.