Question

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

这是一个非常有趣的项目，它托管在github上。本质上，您选择字体，然后下载它们就可以了。到目前为止，除了一个问题之外，一切都还不错：我不确定它是否正常工作。

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

我在wordpress环境中，所以。

转到网站-> https://google-webfonts-helper.herokuapp.com/
下载带有我的字体的文件夹，然后放入我的fonts文件夹（我在wordpress环境中）。
粘贴并复制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很棒。

尝试在本地加载Google字体时出现问题

1 个答案: