2

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

デスクトップで次の問題を検出しました。

  1. ベータ Chrome バージョン 51
  2. Chrome 53 (カナリア)

そして問題は、div小文字を使用している場合 (以下の css を参照) rt、非常に奇妙な方法で表示されることです。

写真に示すように、奇妙な「改行」が自動的に表示されます-Roboto フォントの奇妙な動作

デモンストレーション用に次のコードを作成しました。

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

rtこの奇妙な振る舞いを見るために、他の文字の組み合わせを書くことができます。

ところで -

  1. 最新の Chrome を搭載したタブレットやスマートフォンでは、このような問題は発生していません。
  2. 他のフォントではそのような問題はありません

では、どうすれdisableば変更せずにこの動作を行うことができcssますか?

4

1 に答える 1