Google字体字体高度不一致 [英] Google Font Letter Height Not Consistent

问题描述

我在Chrome中出现了一个奇怪的问题，Google字体显示不一致的字母高度。只有当我使用 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;边距：20像素;字体大小：18像素; text-transform：大写;} span {text-transform：大写; }

< link href =// fonts.googleapis .com / css？family = Exo + 2：200,300,400,700,300italic，400italic，700italic | Raleway：200,300,400,600rel =stylesheettype =text / css> < DIV>碎：其中峰; br> < a href =＃> < span class =upper>测试123< / span> < / A> <峰; br>正常：其中峰; br><峰; br> < span>测试123< / span> < / div>

如果将字体更改为 arial ，它是固定的。是否有一些CSS属性，我需要重置，以便字体将正确呈现？

解决方案

这是一个众所周知的Chrome在Windows上。 Chrome已经制定了政治/生态系统的举措，以减少对其他公司和其他成熟技术的依赖，比如从Web-Kit分离Blink。 Chrome也决定抛弃微软的字体渲染。结果是不好的子像素渲染。你已经注意到，一旦你的字体大小或重量上涨，问题得到解决，因为字符笔画比一个像素宽。

一个解决方案给你：你可以进入Chrome的标志：//启用直接写入。

但是这并不能帮助你的用户。有几个黑客。

一黑客是改变你的字体堆栈，所以SVG是专门为web-kit而调用的。

你可以用媒体查询hack来做到这一点：

  @media屏幕和（-webkit-min-device-pixel-ratio：0）{
 @ font-face {
 font-family：'chunk-webfont'; 
 src：url（'webfont.svg'）格式（'svg'）; 
 
 
 
 
 $ b $ p $所以有这个问题。这不是面向未来的。这是一个黑客。但是现在它已经可以工作了，Chrome将在不久的将来解决这个问题。另外，黑客们还包括首先调用SVG，但结果不太可靠。  
I am having a weird issue in Chrome where a Google Font is showing inconsistent letter heights.  It only happens when I use text-transform: uppercase and it is fixed if I use font-weight:bold.  I have some example code, where you can see the S is too tall in the word TESTING:





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>





If I change the font to arial, it's fixed. Is there some CSS property I need to reset so that the font will render correctly?
解决方案
This is a well known bug in Chrome on Windows. Chrome has made the political/ecosystem move to reduce dependencies on other companies and other established tech, like the move to fork Blink from Web-Kit. Chrome has also decided to ditch Microsoft font rendering. The result is poor sub-pixel rendering. You've noticed that once you bump your font up in size or weight the issue is resolved because the character strokes are wider than one pixel.

One solution for you: you can go into Chrome's flags:// to enable Direct Write. 

But that doesn't help your users, of course. There are a few hacks. 

One hack is to change up your font stack, so that SVG is called specifically for web-kit. 

You can do this with a media query hack:
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'chunk-webfont';
        src: url('webfont.svg') format('svg');
    }
}
So there are issues with this. It's not future-proof. It's a hack. But it works for now, and Chrome will be fixing this in the near future. Other, hacks include calling SVG first in your stack, but it has less reliable results. 

                        
这篇关于Google字体字体高度不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！