尽管可以访问所有字体文件，但@ font-face仍未加载

Question

我的网络中的所有内容都能正常运行，但CSS文件中的@font face除外。 我的网站使用2种字体，它们都不能加载显示。其中一个是fontawesome。我都试图从我的服务器和fontawesome服务器加载字体，但结果是一样的。

我尝试在PC中查看IE Edge，Firefox和Chrome浏览器中的页面，但两者都没有正常工作。但是，当我在iPad Safari中测试时，它运行良好。

请注意，所有字体文件都可以访问，我的电脑可以完美地查看fontawesome.io中的字体。请告知我的代码有什么问题。

以下是代码：

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

以下是PC中的结果（Font Face未加载）：

以下是iPad中的结果（Font Face已成功加载）：

Answer 1

从png开始，理解这个问题是不可能的。我可以告诉你好好阅读this link你可以找到你的解决方案。

如果使用CSS 将整个font-awesome目录复制到项目中。 在你的html的<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 中，引用你的font-awesome.min.css的位置。

font-awesome/

使用Sass或更少 使用此方法使用LESS或SASS自定义Font Awesome 4.7.0。

将font-awesome/less/variables.less目录复制到项目中。 打开项目的font-awesome/scss/_variables.scss或@fa-font-path，然后编辑$fa-font-path或@fa-font-path: "../font"变量以指向您的字体目录。 private void DeletePlayListButton_Click(object sender, RoutedEventArgs e) { var button = sender as Button; if (button != null) { var boundItem = button.DataContext as JonPlaylist; } } ; 字体路径与编译的CSS目录相关。

Answer 2

如果您的网站通过HTTPS协议运行，并且您尝试通过HTTP加载外部资源 - 浏览器将阻止加载。

其次，如果不是上述情况 - 请确保使用正确文件路径加载字体，例如：

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

或使用bootstrap CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">