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