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

时间:2014-08-05 10:37:52

标签: css fonts less rendering

我在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');
}

0 个答案:

没有答案