如果使用@ font-face或标准样式表链接添加Google字体的不同呈现？

Question

我不知道怎么可能......如果我使用谷歌字体@font-face(使用localfont.com创建)或使用标准link样式表(从谷歌服务器下载),有一个不同的渲染.

标准"方式"的渲染优于使用font-face(mh主机上的文件)添加的字体.我只尝试使用firefox.怎么可能？

我更喜欢@ font-face,因为认为这对性能更好,但如果渲染会很难看,那不是一个好主意......

我希望你能帮助我.对不起我的英文,非常感谢!:)

Answer 1

有可能的.渲染可以根据字体格式而有所不同.使用这个:

<link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'>

(或多或少,它根据浏览器而变化)此样式表:

@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  src: local('ABeeZee'), local('ABeeZee-Regular'), url(https://fonts.gstatic.com/s/abeezee/v9/TV7JXr7j4tW7mgYreANhGQ.woff2) format('woff2');
}

另一方面,localfont的样式表是:

@font-face {
  font-family: 'ABeeZee';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot');
  src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot?#iefix') format('embedded-opentype'),
       local('ABeeZee'),
       local('ABeeZee-regular'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.woff2') format('woff2'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.woff') format('woff'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.ttf') format('truetype'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.svg#ABeeZee') format('svg');
}

这第二个css有多种格式的字体,浏览器将使用它能理解的第一个,可能与其他css中使用的不同.

另一方面,字体文件本身可能不同,ABeeZee从localfont(现在)下载大小为13KB,但是从谷歌它是17KB.由于它们不是同一个文件,因此可能会出现不同的结果.