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

我发现的所有解决方案都建议我将网址更改为HTTPS或使用'//'，但我不知道如何做到这一点。

Answer 1

包括这样的字体......

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

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

.banner_header{font-family: RobotoBold;}

CSS /字体 - 混合内容问题

1 个答案: