0

在带有 Chrome 的 Windows 8 上,大文本字体不流畅。但是,我设法看到了一些文本流畅的网站(相同的环境)。

首先:http: //twitter.github.com/bootstrap/examples/hero.html

“你好,世界!” 是平滑的,但是底部的“标题”文本并不像您所看到的那样平滑,即使它们更小。
在此处输入图像描述


另一个是http://www.asana.com。在他们的主页上,“做伟大的事情”的文字很流畅。
在此处输入图像描述


现在两个页面都使用 Twitter Bootstrap CSS。

当我在 Chrome 开发者工具上查看相关 html 元素的计算样式时,我看到了这些值:

background-color: transparent;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
color: #333;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
height: 60px;
letter-spacing: -1px;
line-height: 60px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-rendering: optimizelegibility;
width: 1050px;

我看到 Asana 使用了一种名为 proxima-nova-condensed 的字体,但是当我使用它时,它对我来说并不流畅,即使使用文本渲染:optimizelegibility。

你知道他们是如何实现的吗?我想了解如何在没有 Twitter Bootstrap 的情况下(或者如果必须的话,使用 Bootstrap)来做到这一点。

4

1 回答 1

1

字体渲染各不相同。如果您仔细观察渲染(例如,截取屏幕并放大像素),您会发现平滑度有所不同。您无能为力(部分在 Mac 环境中除外),因此您只需测试您的文本在各种平台和浏览器中看起来是否可以容忍。

于 2013-01-08T17:15:11.973 回答