CSS / 字体 - 混合内容问题

Question

由于通过 HTTP 加载了一种字体，我的网站上出现“混合内容”错误。

我的字体包含在这样的 css 文件中：

@font-face {
  font-family: 'fontXYZ';
  src: url('../font/fontXYZ.eot');
  src: url('../font/fontXYZ.eot#iefix') format('embedded-opentype'),
       url('../font/fontXYZ.woff2') format('woff2'),
       url('../font/fontXYZ.woff') format('woff'),
       url('../font/fontXYZ.ttf') format('truetype'),
       url('../font/fontXYZ.svg#fontXYZ') format('svg');
  font-weight: normal;
  font-style: normal;
}

使用 webpack，我将这个 css 与其他各种 css 捆绑在一个文件中。

在我的网站上，css 如下所示：

@font-face {
  font-family: 'fontXYZ';
  src: url(fontXYZ.eot);
  src: url(fontXYZ.eot#iefix) format('embedded-opentype'),
       url(fontXYZ.woff2) format('woff2'),
       url(fontXYZ.woff) format('woff'),
       url(fontXYZ.ttf) format('truetype'),
       url(fontXYZ.svg#fontXYZ) format('svg');
  font-weight: normal;
  font-style: normal;
}

我发现的所有解决方案都建议我将 URL 更改为 HTTPS 或使用“//”，但我不知道该怎么做。

Answer 1

包括这样的字体...

@font-face {src: url(font/Roboto-Bold.ttf);font-family: RobotoBold;}

font/Roboto-Bold.ttf - 字体文件夹内的字体文件（文件路径） 使用如下字体系列..

.banner_header{font-family: RobotoBold;}