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

时间:2016-01-13 13:48:05

标签: html css text fonts line-breaks

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

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

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

更新 Firefox的行为与资源管理器相同(应用粗体时,Web字体文本会延长)。 chrome中的非Web字体与其他浏览器中的行为相同。显然,chrome(版本47)与Web字体的呈现有异常,因为这是唯一表现不同的情况。我打开了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属性,但当然结果会因文本而异,所以这不是可变内容的可行解决方案。

1 个答案:

答案 0 :(得分:1)

也许是一个解决方法?

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

而不是:

div:hover{
  font-weight:bold;
}

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