為什么我的字體/布局在生產時會發生變化？嘗試過 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