如果添加了@font-face 或标准样式表link，Google 字体的不同渲染？

Question

我不知道怎么可能...如果我使用带有 @font-face 的 google 字体（使用 localfont.com 创建）或者如果我使用标准 link 样式表（从 google 服务器下载）。

标准 "way" 的渲染效果优于使用 font-face 添加的字体（mh 主机上的文件）。我只尝试使用 Firefox。怎么可能？

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

希望你能帮助我。对不起我的英语，非常感谢！ :)

Answer 1

您可能需要使用 text-rendering css 属性调整字体呈现方式。它会对字体的实际外观产生重大影响。

引自 article 关于 css 技巧：

auto（默认） - 浏览器对何时在绘制文本时优化速度、易读性和几何精度进行有根据的猜测。请注意，不同的浏览器对此值的解释不同。

p {
  text-rendering: auto;
}

optimizeSpeed - 浏览器在绘制文本时强调渲染速度而不是易读性和几何精度。它禁用字距调整和连字。

p {
  text-rendering: optimizeSpeed;
}

optimizeLegibility - 浏览器强调易读性优于渲染速度和几何精度。这允许使用特定字体的字体文件中可能包含的特殊字距调整和可选的连字信息。

p {
  text-rendering: optimizeLegibility;
}

geometricPrecision - 浏览器强调几何精度而不是渲染速度和易读性。字体的某些方面（例如字距调整）不是线性缩放的，因此 geometricPrecision 可以使使用这些字体的文本看起来不错。缩放 SVG 字体时，浏览器会计算像素大小，然后四舍五入到最接近的整数。 geometricPrecision 属性允许更流畅的缩放。注意：只有 WebKit 浏览器应用这个流畅的值，Gecko 像 optimizeLegibility 一样对待这个值。

p {
  text-rendering: geometricPrecision;
}

希望对您有所帮助。

Answer 2

有可能。根据字体格式的不同，渲染可能会有所不同。使用这个：

<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。由于它们不是同一个文件，您可能会得到不同的结果。

如果添加了@font-face 或标准样式表link，Google 字体的不同渲染？

Different rendering of Google Fonts if is added with @font-face or standard stylesheet link?

css

firefox

fonts

webfonts

google-font-api