Roboto字体和破解词的错误（在桌面Chrome上）

Question

这似乎是桌面Chrome和Roboto字体的特定错误。

我在桌面上检测到了这个问题：

1. beta Chrome版本51
2. Chrome 53（金丝雀）

问题是，当我div（见下面的css）小写rt时，它会以一种非常奇怪的方式显示。

它会自动显示一条奇怪的＆＃34;新线＆＃34;如图所示 -

我为演示创建了这段代码：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

您可以编写rt个字母的其他组合来查看这种奇怪的行为。

顺便说一下 -

1. 我的平板电脑或使用最新Chrome的智能手机上没有此类问题。
2. 我没有其他字体的问题

那么，我怎样才能disable这种行为而不改变css？

Answer 1

font-kerning: none;

希望它不会影响网站设计。

.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>