如何使用网络字体在浏览器之间实现一致的换行符答案

【问题标题】：How to achieve consistent line breaks between browsers using web fonts如何使用网络字体在浏览器之间实现一致的换行符
【发布时间】：2016-01-13 13:48:05
【问题描述】：

我正在尝试在换行符必须一致的应用程序中让字体在浏览器中平均呈现。内容是用户生成的。

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

使用网络字体时，在 Chrome 中应用粗体时，行不会变长，但在资源管理器中会变长。这会导致跨浏览器的换行不一致。

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

Simplified test case

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 属性，例如字母和单词间距，但当然结果会因文本而异，因此这不是可变内容的可行解决方案。

【问题讨论】：

您是否尝试过在您的 CSS 中：word-break: keep-all 或 word-wrap: normal？
word-break: keep-all 和/或 word-wrap: normal 在测试用例中无效。
你能创建一个 jsfiddle 或 jsbin 吗？尝试使用它修复它会容易得多:)
我想不出任何可以自动执行此操作的 CSS 属性。事实是字符字形在不同的字体/字体中具有不同的宽度......即使是等宽字体，我想不出一个实际需要这样做的实例（也许除了诗歌之外），但也许你可以澄清用例。
@Chirs G：问题中的“简化测试用例”链接指向代码笔示例。

标签： html css text fonts line-breaks

【解决方案1】：

也许可以解决？

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

代替：

div:hover{
  font-weight:bold;
}

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

【讨论】：

非常聪明和有创意的解决方法 :) 它权衡了更重的绘画和渲染成本，并且会改变生产中的现有内容，所以我不确定我是否可以使用它，但可以肯定解决问题的聪明方法:)