这似乎是桌面 Chrome 和 Roboto 字体的一个特殊错误。
我在桌面上检测到这个问题:
- Chrome 51 测试版
- Chrome 53(金丝雀)
问题是,当我有 div
(见下面的 css)和小写的 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>
您可以编写 rt
字母的其他组合来查看这种奇怪的行为。
顺便一提——
- 我的平板电脑或装有最新 Chrome 的智能手机上没有此类问题。
- 我用其他字体没有这样的问题
那么,如何在不更改 css
的情况下禁用
此行为?
最佳答案
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>
关于css - Roboto 字体和断词错误(在桌面版 Chrome 上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37512815/