【问题标题】:Failed to load ressource in Browser Chrome and IE无法在浏览器 Chrome 和 IE 中加载资源
【发布时间】:2016-08-17 16:37:10
【问题描述】:

在我的应用程序中,我使用了不同的字体和引导程序的字形图标。 为了在所有浏览器中查看结果,我将所有必需的字体类型(woff、tft、svg、..)放在字体中。 对于引导图标,我只是将必要的类型放在字体文件夹中。

如果我去本地主机,一切正常。在所有浏览器中,我都可以看到结果。

但是现在我将我的应用程序(战争)部署在了一个真实的服务器上。 在 fireFox 中我仍然可以看到图标和字体,但在 Chrome 和 IE 中看不到。 我在控制台中收到以下错误:

http://myTestServer.com/admin-UI/fonts/source-sans-pro/Source_Sans_Pro_400.woff Failed to load resource: the server responded with a status of 500 (Internal Server Error)
...
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff2
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff 
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.ttf 

我不明白,为什么它在本地工作而不是在真实服务器上工作。 有人知道这个问题吗?

我的 CSS:

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

谢谢!

更新:

之前的index.html(只在spring Boot的localhost服务器上工作):

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

index.html after(这在 tomcat 和 myServer 中都有效)

<!-- Bootstrap Core CSS - tomcat-->
<link href="http://localhost:8080/adminUI/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Core CSS -myTestServer-->
  <link href="http://myTestServer.com/adminUI/css/bootstrap.min.css" rel="stylesheet">

main.css 我还加了绝对路径。我现在的问题是,有没有办法用变量替换绝对路径:“http://..../”。
如果我使用相对路径,那将是与开始时相同的问题。 我希望你明白我的意思。

【问题讨论】:

  • 使用绝对路径在css中包含字体文件
  • 引导字体文件怎么样?它们也必须在 CSS 中吗?我认为引导程序会自动在字体文件夹中找到它们。我应该如何命名引导程序的字体,以便它检测文件?

标签: css twitter-bootstrap google-chrome internet-explorer firefox


【解决方案1】:

您的字体和样式应该像这样在同一个父目录目录中。查看字体和样式文件夹并忽略其他文件夹,这是一个示例。

然后像这样在您的文档中包含引导 css。

<link rel="stylesheet" href="http://example.com/style/bootstrap.min.css">

将 example.com 替换为您的域。 bootstrap 会自动在同一父目录中查找字体文件。这是引导 css 文件的绝对路径。

【讨论】:

  • 非常感谢。它真的奏效了。但是有没有可能在 css 中获得 absoutePath?实际上,我不想将绝对路径放在我的 css 和 index.html 中。在 index.html 中,我可以使用 javaScript。但是在 Css 中这将是一个问题,对吧?
  • 使用绝对路径是没有问题的。但是,如果您不想使用绝对路径,则可以根据根目录使用相对路径。我不知道您使用的是哪个主机。在大多数情况下,public_html 是我们的根目录,假设您的字体和样式文件夹位于 public_html 的 assets 文件夹中,那么您可以使用 /assets/style/somestyle.css。这里 / 在代表根目录的资产之前。在此页面上阅读有关绝对和相对路径的更多信息coffeecup.com/help/articles/absolute-vs-relative-pathslinks
  • 在相对路径中,您还可以使用 ../ 访问父目录 ../../ parent of parent。和 / 从根目录开始。
  • 但是正如你所看到的,我已经在 css 文件和索引中使用了这个 css/... 但这不起作用。它只能在本地工作,但如果我部署它就不行
  • 能否给出运行代码的页面链接,以便我更好地指导。
猜你喜欢
  • 2015-04-02
  • 2016-12-01
  • 1970-01-01
  • 2018-01-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-12-22
  • 1970-01-01
相关资源
最近更新 更多