尝试在本地加载时出现 google-font 问题

Question

我最近决定出于性能目的在本地加载我的字体。我尝试了一堆脚本或解决方案，例如 webfont.js，但几天前我发现了“google-webfonts-helper”。

这是一个非常有趣的项目，它托管在 github 上。基本上你选择你的字体，下载它们，就是这样。到目前为止一切顺利，除了一个问题：我不确定它是否正常工作。

这是我的努力，假设我想使用“open sans”作为字体。

我在 wordpress 环境中，所以我。

1. 去网站->https://google-webfonts-helper.herokuapp.com/
2. 下载包含我的字体的文件夹并放入我的字体文件夹（我在wordpress环境中）。
3. 粘贴并复制 css

CSS：

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('../fonts/open-sans-v16-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/open-sans-v16-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('../fonts/open-sans-v16-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('../fonts/open-sans-v16-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

我的字体在文件夹中：

/public_html/wp-content/themes/myfolder/fonts

一切都很简单，除了当我加载我的字体时，只加载了其中的一些：

这是最有问题的部分，因为它真的很难调试。

本质上，它只加载了一些字体，而不是全部。

我没有发现任何控制台错误，而且它们看起来都一样，因此无法理解出了什么问题。

有什么想法吗？

Answer 1

我预计主要问题是 Open Sans 字体对您的终端不可用，这是 local 代码引用的内容。即使字体保存在您的终端上，如果它在终端的操作系统中激活，它也只能在页面（本地）使用。

您在链接中使用local 引用并没有错，因为它会大大减少您的加载时间......但仅如果用户在他们的个人终端上加载了该字体。 herokuapp 似乎也将此视为最佳实践。

您可能想要做的是首先将网站指向本地字体，然后依次指向存储在服务器上的字体文件。像这样：

@font-face {
    font-family:'Open Sans';
    font-style:normal;
    font-weight:300;
    src: url('Open_Sans/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Open Sans Light'), local('OpenSans-Light'),
         url('Open_Sans/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Open_Sans/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('Open_Sans/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
         url('Open_Sans/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Open_Sans/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

这将告诉用户的浏览器首先在本地查找字体文件 - 如果找不到匹配的文件 - 然后在您网站的服务器上查找文件。 浏览器将按顺序遍历此列表， 从列表顶部的 local 引用开始，然后按照您在代码中列出它们的顺序继续遍历 url 引用.

浏览器不会加载所有字体文件。我不确定我们当中谁知道各种浏览器开发公司所做的“加载顺序”选择。然而，我怀疑这些选择是武断的或特殊的。我猜它是最快的，或者最兼容的；以最合乎逻辑的方式。我必须假设它会跳过它认为不兼容的任何字体文件。正因为如此，您会注意到我上面的代码包含用于最大程度地兼容浏览器和字体文件的后备选项。我在一些标签中发表了评论来说明这一点。

希望对你有所帮助。

最后，herokuapp 很棒，我同意。