Bug with Roboto as a printer on a disktop chromium



  • (original question - strange Roboto font behaviour

    This is the example of the code showing the bug:

    .container {
      word-break: break-word;
    }
    .line {
      padding: 5px;
    }
    .inline-block {
      display: inline-block;
      padding: 7px 10px;
      background-color: #efefef;
      border: 1px solid silver;
      overflow: auto;
      white-space: pre-wrap;
      font-family: Roboto;
    }
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <div class="container">
      <div class="line">
        <div class="inline-block">rt</div>
      </div>
      <div class="line">
        <div class="inline-block">rt rt rt</div>
      </div>
      <div class="line">
        <div class="inline-block">morty</div>
      </div>
      <div class="line">
        <div class="inline-block">mo rty</div>
      </div>
      <div class="line">
        <div class="inline-block">mo Rty</div>
      </div>
      <div class="line">
        <div class="inline-block">mo rTy</div>
      </div>
    </div>

    The leg's not in the chrome for tablet and smartphone.

    How to remove the bug using the data css ?

    P. S. Explain, please, why does such a bug actually happen?



  • After all, I found a solution:

    font-kerning: none;
    

    But the question is, how acceptable it is. ♪ ♪

    .container {
      word-break: break-word;
    }
    .line {
      padding: 5px;
    }
    .inline-block {
      display: inline-block;
      padding: 7px 10px;
      background-color: #efefef;
      border: 1px solid silver;
      overflow: auto;
      white-space: pre-wrap;
      font-family: Roboto;
      font-kerning: none;
    }
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <div class="container">
      <div class="line">
        <div class="inline-block">rt</div>
      </div>
      <div class="line">
        <div class="inline-block">rt rt rt</div>
      </div>
      <div class="line">
        <div class="inline-block">morty</div>
      </div>
      <div class="line">
        <div class="inline-block">mo rty</div>
      </div>
      <div class="line">
        <div class="inline-block">mo Rty</div>
      </div>
      <div class="line">
        <div class="inline-block">mo rTy</div>
      </div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2