自托管字体未在应用程序中加载。我在应用服务器中使用@font-face 和自托管字体

Question

我在我的服务器中托管字体，可以像 - https://cdn.mywebsite/fonts/font-name 一样访问它 现在我有一个 css 文件（在与 index.html 相同的文件夹中），我正在使用 @font-face 导入这些文件，如下所示：

        font-family: 'fontname';
        src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
          url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
        font-weight: 300;
        font-style: normal;
      }

      @font-face {
        font-family: 'fontname';
        src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
          url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
        font-weight: 300;
        font-style: italic;
      }
...... and a few more

我尝试使用 2 种方法在我的 index.html 中导入此文件，均在网络选项卡中返回 404 错误。

1.

<style type='text/css'>
  @import url('fonts.css');
</style>

1. <link rel="stylesheet" type="text/css" href="fonts.css"/> 在 #2 中，我尝试使用 src/..../fonts.css 和 ./fonts.css 和 /fonts.css（对于 #1 也有类似的尝试）

我不确定发生了什么以及为什么它不起作用。

现在的工作是直接在组件中添加 css，如下所示：

<style type="text/css">
  @font-face {
        font-family: 'fontname';
        src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
          url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
        font-weight: 300;
        font-style: normal;
      }

      @font-face {
        font-family: 'fontname';
        src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
          url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
        font-weight: 300;
        font-style: italic;
      }
</style>

我正在使用 node express 和 react（但我认为这不重要）。

非常感谢任何帮助。

Answer 1

有几件事要看。

1. https://cdn/mywebsite.com/fonts/font-name.woff2 不是有效的 URL，因为 cdn 不是有效的主机名。对于 woff2 字体文件对象，您需要 https://cdn.mywebsite.com/fonts/font-name.woff2 或类似 https://cdn.example.com/mywebsite.com/fonts/font-name.woff2 的东西。

2. 您的 css 需要提及的不仅仅是 woff2 字体文件才能跨浏览器工作。您还需要其他格式。这是 FontAwesome 的可用 css 文件的一部分示例。 （见此。https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css）

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
       url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
       url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

您最喜欢的搜索引擎会找到一些用于创建网络字体资产的在线工具，包括 CSS 文件和各种字体文件格式。