local - 尝试在本地加载时出现 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

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

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

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

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

有什么想法吗？

标签： localwebfontsgoogle-webfontsgoogle-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 很棒，我同意。