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

Question

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

[ 实际字体[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"/>

Answer 1

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

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

混合内容：“...”处的页面已通过 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。

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

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

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

问题描述

1 个解决方案

解决方案1
2 2020-05-02 05:26:34

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

问题描述

1 个解决方案

解决方案1 2 2020-05-02 05:26:34

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

解决方案1
2 2020-05-02 05:26:34