css - 如果添加 @font-face 或标准样式表链接，谷歌字体的不同呈现？

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 中使用的不同。

另一方面，字体文件本身可能不同，从 localfont 下载的 ABeeZee(现在)大小为 13KB，但从 Google 下载的是 17KB。由于它们不是同一个文件，您可能会得到不同的结果。