Css 应用程序中未加载自托管字体。我在app server中使用@font-face和自托管字体

我在我的服务器上托管字体，可以像-

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

<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>

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

一,

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

---

非常感谢您的帮助。

有几件事要看

https://cdn/mywebsite.com/fonts/font-name.woff2

不是有效的URL，因为

cdn

不是有效的主机名。您需要

https://cdn.mywebsite.com/fonts/font-name.woff2

或者类似于

https://cdn.example.com/mywebsite.com/fonts/font-name.woff2

用于woff2字体文件对象

您的css需要提及的不仅仅是woff2字体文件，以便跨浏览器工作。你也需要其他格式。下面是一个示例，展示了FontAwesome可用css文件的一部分。（见此。）

---

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

一些要查看的内容

https://cdn/mywebsite.com/fonts/font-name.woff2

不是有效的URL，因为

cdn

不是有效的主机名。您需要

https://cdn.mywebsite.com/fonts/font-name.woff2

或者类似于

https://cdn.example.com/mywebsite.com/fonts/font-name.woff2

用于woff2字体文件对象

您的css需要提及的不仅仅是woff2字体文件，以便跨浏览器工作。你也需要其他格式。下面是一个示例，展示了FontAwesome可用css文件的一部分。（见此。）

---

您最喜欢的搜索引擎将找到几个用于创建web字体资产的在线工具，包括CSS文件和各种字体文件格式。

字体在服务器目录结构中的位置<代码>https://cdn/mywebsite/fonts不是有效的URL

cdn

是该URL中的主机名。您将需要类似

http://mysitedomain.com/fonts

其中

字体

是公共目录下用于提供静态文件的目录。抱歉，我会更正我的链接，它是

https://cdn/mywebsite.com/fonts

字体位于

src/main/font

中，与

src/main/index.html

字体在服务器目录结构中的位置相同<代码>https://cdn/mywebsite/fonts不是有效的URL

cdn

是该URL中的主机名。您将需要类似

http://mysitedomain.com/fonts

where

font

是公共目录下用于提供静态文件的目录。抱歉，我会更正我的链接，它是

https://cdn/mywebsite.com/fonts

font位于

src/main/font

中，与

src/main/index.html

typo相同，很抱歉我把它固定到cdn.mywebsite

当我这样做时，它会访问字体，但字体不会加载。我也将字体添加到css文件中。这不也应该工作吗？控制台中没有错误，但网络标签显示404错误。输入错误，抱歉。我把它固定到cdn.mywebsite

当我这样做时，它会访问字体，但字体不会加载。我也将字体添加到css文件中。这不也应该工作吗？控制台中没有错误，但网络标签显示404错误。

<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>

@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;
}