RobotフォントとBreak-Word（デスクトップChrome）のバグ

Question

デスクトップChromeとRobotoフォントのバグのようです。

私はデスクトップ上でこの問題が検出されました：

1. ベータChromeバージョン51
2. クロム53（カナリア）

をし、問題が、私はdiv（下記のCSSを見ていたときに、 ）小文字のrtで表示されます。これは非常に奇妙な方法で表示されます。

これは、自動的に画像の上に示すように、奇妙な "新しい行" が表示さ - 私はデモのために、このコード作成

：あなたはrtの他の組み合わせを書き込むことができ

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

をこの奇妙な行動を見るための手紙。ところで

-

1. 私は、最新のクロームと私のタブレットやスマートフォン上で、このような問題を持っていません。
2. 私は、他のフォント
ので

で、このような問題を持っていないどのようにすることができますI disablecssを変更せずに、この動作？

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>