Question

也许我误解了Font Face Observer的工作方式。我的理解是，这允许您仅在使用时加载字体。但是，无论我在代码中放入哪种字体，它始终会将其加载到浏览器中。下面的示例代码。如果加载所有字体，这会使我的页面“沉重”吗？特别是如果我不使用所有字体？描述的这一部分使我感到困惑：

与Web字体加载程序不同，Font Face Observer使用滚动事件来有效且以最小的开销检测字体加载。

在我看来，当您向下滚动时，它将检测是否正在使用一种字体，如果正在使用，请加载它。另外，如果我未指定权重，那么说Roboto的字体加载程序是否会加载所有可用的权重？

[ec2-user@ip-172-31-18-140 ~]$ inspec shell -t ssh://ec2-user@172.31.17.177 -i /home/ec2-user/.ssh/authorized_keys
I, [2019-07-15T19:50:32.791120 #1094]  INFO -- : [SSH] connection failed, retrying in 1 seconds (#<Errno::EHOSTUNREACH: No route to host - connect(2) for 172.31.17.177:22>)
I, [2019-07-15T19:50:35.863119 #1094]  INFO -- : [SSH] connection failed, retrying in 1 seconds (#<Errno::EHOSTUNREACH: No route to host - connect(2) for 172.31.17.177:22>)
I, [2019-07-15T19:50:38.935116 #1094]  INFO -- : [SSH] connection failed, retrying in 1 seconds (#<Errno::EHOSTUNREACH: No route to host - connect(2) for 172.31.17.177:22>)
I, [2019-07-15T19:50:42.007110 #1094]  INFO -- : [SSH] connection failed, retrying in 1 seconds (#<Errno::EHOSTUNREACH: No route to host - connect(2) for 172.31.17.177:22>)
W, [2019-07-15T19:50:45.079113 #1094]  WARN -- : [SSH] connection failed, terminating (#<Errno::EHOSTUNREACH: No route to host - connect(2) for 172.31.17.177:22>)

当它运行时，我会在控制台中看到：

var fontA = new FontFaceObserver('Roboto');
var fontB = new FontFaceObserver('Roboto Condensed');
var fontC = new FontFaceObserver('Open Sans');
var fontD = new FontFaceObserver('Open Sans Condensed');
var fontE = new FontFaceObserver('Oswald');

fontA.load().then(function () {
  console.log('Roboto font is available');
});

fontB.load().then(function () {
  console.log('Roboto Condensed font is available');
});

fontC.load().then(function () {
    console.log('Open Sans font is available');
});

fontD.load().then(function () {
    console.log('Open Sans Condensed Font is available');
});

fontE.load().then(function () {
    console.log('Oswald font is available');
});

因此回顾一下，此字体加载器的目的是加载我指定的所有字体吗？如果我只使用字体名称而不指定特定的粗细，它会自动加载所有粗细吗？还是我还需要添加每种字体要使用的每种粗细？

Answer 1

您在这里描述的内容：

我的理解是，这允许您仅在使用时加载字体。

…实际上是@font-face的默认浏览器行为。如果您有10个@font-face声明，但在页面上仅使用了一个相应的font-family，则将仅加载一个字体文件。

Font Face Observer很棒，当您想要在字体可用后再做其他事情时，例如。在canvas上使用它，应用CSS类，等等。我认为Font Face Observer将需要使用该家族检查其是否可用，因此这就是即使您未使用它们也要加载它们的原因它们放在您自己的CSS中的其他任何位置。如果您在加载字体后不需要执行其他任何操作，则浏览器的默认行为可能会按原样工作。

Font Face Observer加载页面上的所有字体吗？

1 个答案: