为什么我的字体/布局在生产时会发生变化？ 尝试过 Netlify 和 Github 页面
[英]Why do my fonts/layout change when in production? Tried Netlify and Github Pages
问题描述
I'm trying to host a site on Netlify (or github pages), but for some reason when entering production, the fonts change, as well as some layout issues (See photos)
我正在尝试在 Netlify 上托管一个站点（或 github 页面），但由于某种原因，在进入生产阶段时，fonts 发生了变化，以及一些布局问题（见图）
[ [
I'm not sure if this issue is due to CSS specificity, or if I need to declare the font-types somewhere;我不确定这个问题是由于 CSS 的特殊性，还是我需要在某处声明字体类型； I've already added them to my <head> tag, and my css file has them each imported.我已经将它们添加到我的<head>标记中，并且我的 css 文件分别导入了它们。
I've created a codepen with the code: https://codepen.io/aladin94/pen/BaowqgX (keep in mind the images and layouts will differ).我用代码创建了一个codepen： https://codepen.io/aladin94/pen/BaowqgX （请记住图像和布局会有所不同）。 Any ideas?有任何想法吗？
The font imports:字体导入：
<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"/>
1 个解决方案
解决方案1
2 2020-05-02 05:26:34
I guess, that your production site blocks the insecure font.我猜，您的生产站点阻止了不安全的字体。
See my browser console print:查看我的浏览器控制台打印：
Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure font混合内容：“...”处的页面已通过 HTTPS 加载，但请求的字体不安全
http ://db.onlinewebfonts.com/t/146c398456e6a22b45102120ae8a7679.woff
. . This request has been blocked;此请求已被阻止； the content must be served over HTTPS.内容必须通过 HTTPS 提供。
You can change the behaviour for the specific font or you have to find a secure font for your case.您可以更改特定字体的行为，或者您必须为您的情况找到一种安全的字体。
Have you tried this link:您是否尝试过此链接：
<link href="https://db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus" rel="stylesheet" type="text/css" />
EDIT : As already mentioned in the comment section, you can find the sources in your developer mode of your browser.编辑：正如评论部分已经提到的，您可以在浏览器的开发人员模式中找到源代码。 In my case, I am using chrome.就我而言，我使用的是 chrome。
Try to download your needed files/ sources and afterwards you can try to upload it to your server environment.尝试下载您需要的文件/源，然后您可以尝试将其上传到您的服务器环境。
I guess, it's not really a programming question/ solution because it's more related to library handling or security setup.我想，这不是一个真正的编程问题/解决方案，因为它与库处理或安全设置更相关。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.