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