字體系列在輸出中不會改變

Question

在 < h1 > 標簽中，當我更改任何文本塊（或分區）的任何字體系列並在瀏覽器中打開它時，字體系列不會改變。 h1 沒有任何變化，我已經應用了它。

以下是我的 HTML 代碼：

<h1 align="center" class="login">      
           LOG IN</h1><hr /><br />

這是我的 CSS 代碼：

.login
{
    color:Black;
    font-family:Calibri;
    font-size:xx-large;
    font-weight: bold;

}

我得到的輸出如下：

我也將字體更改為 Calibri。 但是，沒有反映任何變化。 輸出始終顯示相同的字體系列。 我不明白，問題可能出在哪里？

Answer 1

在您的個人樣式 css 文件中檢查您的 @font-face 規則。 你應該像這樣添加你的字體：

@font-face {
  font-family: "font name";
  src: url(font path/font name.eot);
  src: url(font path/font name.eot?#iefix) format('embedded- 
  opentype'),
   url(font path/font name.woff) format('woff'),
   url(font path/font name.ttf) format('truetype'),
   url(font path/font name.svg#font name) format('svg');
   font-weight: normal;
   font-style: normal
 }

並在 font-family 前面寫下您的字體名稱和雙引號或單引號中的格式，例如“Calibri”或“Calibri”和“svg”或“svg”，其他類型的引用會導致字體無法正確更改也是（當您將@font-face 規則的代碼從某些網站復制並粘貼到您的編輯器時，您可以看到引號的形狀不同）。

並檢查你的路徑，你應該用正斜杠（/）將它分開，例如“我的項目/字體/Calibri.woff2”。

使用不同的格式在不同的瀏覽器中正確顯示您的字體。IE8 及以下的“eot”格式，舊瀏覽器特別是手機的“ttf”，舊瀏覽器的“SVG”，所有現代瀏覽器的“woff”和“woff2”，如果你沒有它們，你可以在“transfonter.com”中轉換你的字體。

Answer 2

首先定義你的字體

@font-face{
   font-family:My Font; 
   src: url(fonts/myfont.ttf)
 }


h1{font-family:"My Font"}

Answer 3

您應該首先使用普通的網絡安全字體（如“Arial”）測試您的規則，這是網絡安全字體列表： http : //www.w3schools.com/cssref/css_websafe_fonts.asp

如果可行，那么問題可能類似於 Rana 提出的問題，您應該添加字體定義規則： http : //www.w3schools.com/cssref/css3_pr_font-face_rule.asp

如果正常的網絡安全字體仍然不起作用，您可能有另一個規則，它更強大，覆蓋這個規則。 您可以通過在瀏覽器中檢查該元素（Chrome 的 devtools 最適合）並查看您的規則並查看它是否為一條線來檢查它（意味着它沒有被使用並且瀏覽器忽略它），像這樣（只是你的規則而不是背景位置規則）：

此外，測試這一點的一種簡單方法是嘗試將!important關鍵字添加到上述規則中，使其具有比其他規則更高的優先級。

.login {
    color: Black;
    font-family: Arial !important;
    font-size: xx-large;
    font-weight: bold;

}

所以它在 Chrome 的 devtools 中看起來像這樣：

您可以在此處找到有關此關鍵字和 css 實現的整個級聯優先級系統的更多信息： http : //www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

（圖片來自這篇博文：）

Answer 4

如果您在較新的 PC 或 MAC 上工作，Calibri 字體應該可以工作。

如果@font-face 不起作用，則必須有一些代碼會覆蓋h1樣式。

嘗試找出是否有其他東西覆蓋了樣式。

否則嘗試將您的.login重命名為： h1.login ：

所以而不是：

.login {
   color:Black;
   font-family:Calibri;
   font-size:xx-large;
   font-weight: bold;

}

用：

h1.login {
   color:Black;
   font-family:Calibri;
   font-size:xx-large;
   font-weight: bold;

}

Answer 5

放'Calibri'

 p { font-family: 'calibri'; }

 <p>hello this is calibri</p>