html - Google 字体在 Chrome 和 Firefox 中看起来不同

Question

我正在使用 Maven Pro font来自谷歌，但我注意到有些字母在 Chrome 和 Firefox 中看起来不同，例如字母 a:

谷歌字体网站不会出现这个问题。我试着把它放在我的 css 样式表上:

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
body{font-family:'Maven Pro', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

但它仍然是同样的问题，我还需要修改什么才能在两个浏览器中获得相同的外观？

Answer 1

不确定，但我想这可能会有所帮助:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

或者也试试这个:

body {
    font-size: 100%;
    background-color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;

如果未达到预期结果，请继续更改 0.7。