Combinations of letters “fi” and “fl” is not displayed by browsers

问题

I have the following problem:

for my website I chose webfont 'Fira Sans Condensed' from Google Fonts (Latin, Latin Extended, Cyrillic, Cyrillic Extended). For generating font formats I have used Font Squirrel, which generated for me files with .woff and .woff2 extensions.

I include font with next css-code:

@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;
}

My content displayed correctly except for combinations of letters "fi" and "fl". For example: "Wi-fi" dispays like "Wi- ".

To solve the problem I tried to include font with more font-extensions (.eot,.ttf) and in a different order, but situation has not changed.

Then I used Google Fonts method of including: <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,700&subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">. With this method my problem is solving! But for me it's in principle to include fonts locally.

I see the issue in the following browsers: Google Chrome 55.0.2883.87; Mozilla Firefox 51.0.1. In IE10 the problem does not appear!

Thank you in advance!

回答1:

Try this against the element in which the fonts are rendering (or body).

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

You might need vendor prefixes:

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

The features that can be toggled this way (if the font supports them) are..

liga: standard ligatures
dlig: discretionary ligatures
onum: old style figures
lnum: lining figures
tnum: tabular figures
zero: slashed zero
frac: fractions
sups: superscript
subs: subscript
smcp: small caps
c2sc: small capitals from capitals
case: case-sensitive forms
hlig: historical ligatures
calt: contextual alternates
swsh: swashes
hist: historical forms
ss**: stylistic sets
kern: kerning
locl: localized forms
rlig: required ligatures
medi: medial forms
init: initial forms
isol: isolated forms
fina: final forms
mark: mark
mkmk: mark-to-mark positioning

They can even be combined into one rule like this:

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

回答2:

Common ligatures are activated by default, but some fonts don't support them. Try to disable them with font-feature-settings:"liga" 0; This worked for me.

来源：https://stackoverflow.com/questions/42269783/combinations-of-letters-fi-and-fl-is-not-displayed-by-browsers

标签

html

css

fonts

webfonts

google-webfonts