Question

我在Google Chrome浏览器的Win7上遇到了字体渲染（Google字体）的一些主要差异。当通过 @import 调用Google Font到LESS文件时，渲染就可以，但是当我复制粘贴导入的文件的相同内容时，我会得到扭曲的字体。

任何想法，为什么会这样？由于Google PageSpeed优化指南，我需要避免使用@import。

当通过 @import 将Google字体调入LESS文件时，渲染就可以了：http://cl.ly/Wtqb/o 代码如下：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300&subset=latin,latin-ext);

但是，当Google字体被直接称为LESS文件时，渲染会变形：http://cl.ly/WuOp/o

代码如下：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzOY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}

Google Chrome以不同的方式呈现Google字体

0 个答案: