我在Chrome浏览器中遇到了一个奇怪的问题,谷歌字体的字母高度不一致。 只有当我使用
text-transform: uppercase
时才会出现这种情况,如果我使用font-weight:bold
则可以解决这个问题。我有一些示例代码,您可以看到单词TESTING
中的S
太高了。
body {
font-family: 'Exo 2' !important;
line-height:1.42857143;
}
div {
width:40px;
}
span.upper {
display:block;
margin-top:20px;
font-size:18px;
text-transform:uppercase;
}
span {text-transform:uppercase; }
<link href="//fonts.googleapis.com/css?family=Exo+2:200,300,400,700,300italic,400italic,700italic|Raleway:200,300,400,600" rel="stylesheet" type="text/css">
<div>
Broken:<br>
<a href="#">
<span class="upper">Testing 123</span> </a>
<br>Normal:<br><br>
<span>Testing 123</span>
</div>
如果我将字体更改为arial
,问题就解决了。是否需要重置某些CSS属性,以便正确呈现字体?