我创建了一个小提琴试图使用font-weight 300的Open Sans字体:
HTML
<span class="demo">example</span>
Run Code Online (Sandbox Code Playgroud)
CSS
.demo {
font-weight: 400 !important;
font-family: 'Open Sans' !important;
font-style: normal;
font-variant: normal;
}
Run Code Online (Sandbox Code Playgroud)
我使用谷歌字体来定义CSS
我可以看到Firefox(Ubuntu 13.10)在font-weight:300(轻量级)和font-weight:400(正常)下渲染时的差异,但在Chrome(版本33.0.1750.117)中没有,其中所有内容看起来都是在渲染时字体重量:400.我做错了什么或Chrome中有错误吗?有没有已知的解决方法?
更新:
Chrome肯定存在问题我在Chrome中的2个不同窗口中打开了同一页面的两个实例.一种是使字体呈现正常(300重量对应于光变体)而一种不是(300重量与正常变体相同).有线索吗?我确保刷新每个标签页面,使它们实际上是同一页面.
更新2:附上截图:错误:
更新3 这是不是重复的这个.在那个问题中,问题是"Arial Black"和"Arial"实际上是不同的字体.在我的情况下,Open Sans是唯一的字体,问题是Chrome有时会收到不正确的重量.从截图中可以看出,Chrome与两个实例之间渲染的字体不一致.
我正在尝试将输入按钮中的字体设置为粗体.
这是我的代码:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Run Code Online (Sandbox Code Playgroud)
这是我的CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
Run Code Online (Sandbox Code Playgroud)
除了大胆之外,所有样式都被应用了.
这是一个显示问题的JSFiddle:http://jsfiddle.net/CJg43/1/
更新:为何选票结束?这是在MacOS Chrome浏览器中查找我的截图:

更新2:...为了比较,这里是background-color: white应用解决方案()的样子- http://jsfiddle.net/CJg43/23/

刚刚测试了一些在firefox和chrome上运行完美的东西,并没有使用font-weight: bold/bolder属性.
我试图查找可能覆盖它的另一个CSS属性,但没有,Google也没有答案.
position: absolute;
top: 8px;
left: 50px;
font-size:38px;
font-weight: bolder;
Run Code Online (Sandbox Code Playgroud) .bold{
font: 900 20px helvetica;
}
.bolder{
font: 700 20px helvetica;
}
Run Code Online (Sandbox Code Playgroud)
除了Mozilla Firefox,我得到的结果相同.
任何人都可以告诉我如何在所有浏览器中获得相同的结果(Firefox,Chrome,IE,safari,opera)