如何使用web字体在浏览器之间实现一致的换行

Question

我正试图在一个换行符必须一致的应用程序中，让字体在浏览器之间平等地呈现。内容由用户生成。

粗体使字母变宽。使用默认的浏览器字体，当文本被包装在容器中时，该行将提前断开。

当使用网络字体时，当在Chrome中应用粗体时，线条不会变长，但在Explorer中会变长。这导致浏览器之间的换行不一致。

更新：Firefox的行为与浏览器相同（应用粗体时，网页字体文本会变长）。chrome中的非web字体与其他浏览器中的行为相同。显然，chrome（版本47）在web字体的呈现方面存在异常，因为这是唯一表现不同的情况。我打开了一个链接到此问题的错误报告。

简化的测试用例

HTML

<h2>will break in chrome and explorer:</h2>
<div>
hover to make the text bold and break the line!
</div>
<h2>will break in explorer only:</h2>
<div class="web-font">
hover to make the text bold and break the line!
</div>

CSS

@font-face { font-family: 'roboto'; src: local('roboto'), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'); 
}
div{
  width:380px;
  height:100px;
  border:5px solid gray;
  font-size:20px;
  margin-bottom:10px;
}
.web-font{
    font-family: 'roboto';
  font-size:18px;
}
div:hover{
  font-weight:bold;
}

我测试了.ttf和.woff格式，得到了相同的结果。

我尝试调整CSS属性，如字母和单词间距，但结果当然会因文本而异，因此这不是一个适用于可变内容的可行解决方案。

Answer 1

也许是变通办法？

div:hover{
  text-shadow:0 0 1px Black;
}

而不是：

div:hover{
  font-weight:bold;
}

http://codepen.io/anon/pen/MKOgYw