javascript - 为什么我的字体/布局在生产时会发生变化？尝试过 Netlify 和 Github 页面

问题描述

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

[ 实际字体[2]

我不确定这个问题是由于 CSS 的特殊性，还是我需要在某处声明字体类型；我已经将它们添加到我的<head>标签中，并且我的 css 文件将它们都导入了。

我用代码创建了一个codepen：https ://codepen.io/aladin94/pen/BaowqgX （请记住图像和布局会有所不同）。有任何想法吗？

字体导入：

<link href="//db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus"
rel="stylesheet" type="text/css"/>
<link href="//db.onlinewebfonts.com/c/21400dc679986534519c638136d62dbf?family=Rage+Italic" 
rel="stylesheet" type="text/css"/>

标签： javascripthtmlcssfontsgithub-pages

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

查看我的浏览器控制台打印：

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

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

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

您可以更改特定字体的行为，或者您必须为您的情况找到一种安全的字体。

您是否尝试过此链接：

<link href="https://db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus" rel="stylesheet" type="text/css" />

编辑：正如评论部分已经提到的，您可以在浏览器的开发人员模式中找到源代码。就我而言，我使用的是 chrome。

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

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

javascript - 为什么我的字体/布局在生产时会发生变化？尝试过 Netlify 和 Github 页面

问题描述

解决方案

推荐阅读