如果字母间距较大，如何更正 'fi' 和 'fl' 的连字？

Question

我使用 Google 字体 'Roboto' 并扩展了 .3em 的字母间距。在这种情况下，如何在由 'fl' 和 'fi' 组成的单词中校正小 'f' 字母的粘性连字？我试图将 'Roboto' 的字体系列更改为 'sans' 和 'sans-serif'，但在扩大字母间距的情况下看起来太可笑了。你有什么建议吗？

html,body{
 min-width:100vw;
 max-width:100vw;
 min-height:100vh;
 max-height:100vh;
    margin: 0;
    padding: 0;
}

*{
 margin: 0;
  padding: 0;
 box-sizing:0;
}

body {
 background: #CFB095;/*PANTONE 14-1315 TCX Hazelnut*/
 font-family: 'Roboto', sans;
 font-size:24px;
 color: rgba(255,255,255,1);
 font-size: 44px;
 word-spacing: .5rem;
 letter-spacing: .35rem;
 text-align: center;
}

h1{font-size: 2rem}

h2{font-size: 1.5rem; padding:3rem 0 1.5rem 0;}
 
p{font-size: 1rem}

.skip{
 clip: rect(0 0 0 0);
 margin: -1px; 
 overflow:hidden;
 display: none;
 position: absolute; 
 top: -1px; 
 left: -1px;
 z-index: -1;
}

<!DOCTYPE html>
<html lang='en'>
 <head>
 <meta name='robots' content='noindex'>
 <meta charset='utf-8'>
 <meta name='viewport' content='width=device-width, initial-scale=1'>
 <title>DEMO | Typography Exploration</title>
 <link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Roboto'>
 <link rel='stylesheet' type='text/css' href='/index_style.css'>
 </head>

 <body>
  <h1 class='skip'>Typography Exploration</h1>
  <section>
   <h2>Ligatures to be fixed: 'fl'  'fi'</h2>
    <p>Flip fly fluffy Ff.
    <br>Fitting for a figure fixing.
        <br>Affirm effect.
        <br>At least 'ff' is well supported in Chrome</p>
  </section>
 </body>
</html>

Answer 1

使用font-variant-ligatures: none;。在现代浏览器中是 well supported。

html,body{
 min-width:100vw;
 max-width:100vw;
 min-height:100vh;
 max-height:100vh;
  margin: 0;
  padding: 0;
}

*{
 margin: 0;
  padding: 0;
 box-sizing:0;
}

body {
 background: #CFB095;/*PANTONE 14-1315 TCX Hazelnut*/
 font-family: 'Roboto', sans;
  font-variant-ligatures: none;
 font-size:24px;
 color: rgba(255,255,255,1);
 font-size: 44px;
 word-spacing: .5rem;
 letter-spacing: .35rem;
 text-align: center;
}

h1{font-size: 2rem}

h2{font-size: 1.5rem; padding:3rem 0 1.5rem 0;}
 
p{font-size: 1rem}

 <link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Roboto'>
 <link rel='stylesheet' type='text/css' href='/index_style.css'>

<body>
  <h1 class='skip'>Typography Exploration</h1>
  <section>
    <h2>Ligatures to be fixed: 'fl'  'fi'</h2>
      <p>Flip fly fluffy Ff.
      <br>Fitting for a figure fixing.
      <br>Affirm effect.
      <br>At least 'ff' is well supported in Chrome</p>
  </section>
</body>

如果字母间距较大，如何更正 'fi' 和 'fl' 的连字？

How to correct the ligatures of 'fi' and 'fl' in case of larger letter-spacing?

css

google-font-api

letter-spacing

ligature