Javascript 为什么在生产过程中我的字体/布局会发生变化？尝试了Netlify和Github页面

我正试图在Netlify（或github页面）上托管一个站点，但由于某些原因，在进入生产时，字体会发生变化，以及一些布局问题（参见照片）

[

我不确定这个问题是否是由于CSS的特殊性造成的，或者我是否需要在某个地方声明字体类型；我已经将它们添加到我的

标记中，并且我的CSS文件已经导入了每个字体类型

我已经用代码创建了一个代码笔：（记住图像和布局会有所不同）。有什么想法吗

字体导入：

---

我想，您的生产站点阻止了不安全的字体

请参见我的浏览器控制台打印：

混合内容：“…”处的页面通过HTTPS加载，但请求的字体不安全

http://db.onlinewebfonts.com/t/146c398456e6a22b45102120ae8a7679.woff

。此请求已被阻止；内容必须通过HTTPS提供

您可以更改特定字体的行为，或者必须为您的案例找到安全字体

您是否尝试过此链接：

编辑： 正如在评论部分已经提到的，你可以在浏览器的开发者模式下找到源代码

尝试下载所需的文件/源，然后可以尝试将其上载到服务器环境

我想，这不是一个真正的编程问题/解决方案，因为它更多地与库处理或安全设置相关

---

您是否尝试过在本地安装字体，如果没有，请尝试。@MayankGupta我如何在本地安装字体？从字体网站下载？是的@al feratovic，从网站下载，或者如果ttf或woff文件可用，您也可以生成所有类型的字体。@MayankGupta谢谢。但是，一些字体网站会收取f的费用或每种字体。是否有方法避免下载字体？以便允许不同的浏览器阅读它们？如何更改字体的行为？此外，这是Netlify上的网站：。如您所见，第一张幻灯片中的字体工作正常，但其余的字体具有相同的默认字体。这是因为只有一种字体是安全的吗？如果我正在查看网站，我只能看到“字体系列”：“Helvetica”；.第一张幻灯片是什么？Rockstart游戏？正如@MayankGupta所说，在您的网站上下载并托管它将是最好的解决方案。如果您在浏览器开发人员模式下打开源代码面板，您可以找到不同格式的字体URL。但是如上所述，您必须相信作者。：）谢谢您的建议。是的，第一张幻灯片是tRockstar游戏幻灯片。大多数字体都是在网上找到的，一些字体网站会收费购买字体，所以我尝试在html/css中导入它们。有没有办法编写代码语句，让它们在每个浏览器中运行（woff、ttf等）。或者我需要先在本地下载字体？