javascript - ERR_CONNECTION_TIMED_OUT 与 google apis 字体

Question

当我在客户端服务器上部署我的 Web 元素时，我收到此错误并且页面加载缓慢。

GET https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic net::ERR_CONNECTION_TIMED_OUT

浏览器在 Jquery javascript 行上给我这个错误:

<script type="text/javascript" src="/DART/static/assets/plugins/jQuery/jQuery-2.1.4.min.js"></script>

所有 javascript 和 css 文件都在我的元素中，因为在服务器后面，防火墙几乎阻止了所有外部 url。 我在 css 中找到了这一行，我应该用本地 url 进行更改。

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);

来自 here我下载了字体 如何在我的元素中导入它？谢谢

已解决:

按照 GeorgeGkas 的建议，我将从 localfont 获得的文件夹添加到我的元素中，然后我不得不将所有网址更改为 font.css 在每个网址之前添加 ../。例如 url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot'); 变成了 url('../fonts/Source- Sans-Pro-300/Source-Sans-Pro-300.eot'); 谢谢

Answer 1

据我了解，您想在元素中手动导入字体。我建议你使用 localfont.com .只需选择您的字体并勾选您喜欢的所有变体。 Web 应用程序将生成一个下载链接到一个包含以下内容的 zip 文件:

• 具有字体格式(.ttf、.woff2、.woff)的字体文件夹。 你不需要玩这些。
• 一个 font.css 文件，其中包含您要求的 @font-face。只需将其复制粘贴到您的元素并操作 urlsm(如果您必须指向字体文件夹)。

如果您在网站中添加上述问题选项，将获得下面的 css 文件以及字体文件夹。

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 300;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');
  src: url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Light'),
       local('Source-Sans-Pro-300'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot');
  src: url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro'),
       local('Source-Sans-Pro-regular'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot');
  src: url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Semibold'),
       local('Source-Sans-Pro-600'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 700;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot');
  src: url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Bold'),
       local('Source-Sans-Pro-700'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 300;
  font-style: italic;
  src: url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.eot');
  src: url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Light Italic'),
       local('Source-Sans-Pro-300italic'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-style: italic;
  src: url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.eot');
  src: url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Italic'),
       local('Source-Sans-Pro-italic'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 600;
  font-style: italic;
  src: url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.eot');
  src: url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Semibold Italic'),
       local('Source-Sans-Pro-600italic'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.svg#SourceSansPro') format('svg');
}