字體系列不輸出

Question

在h1標籤當我改變字體系列和調試項目的任何風格，那麼FONT-FAMILY無法改變，而不是任何上半年

這樣

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; 

} 

，這裏是輸出

代替宋體我也改變字體，但輸出總是相同的字體家庭不能在輸出 問題出在哪裏改？

Answer 1

定義您的字體第一

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


h1{font-family:"My Font"} 

Answer 2

您應該先像「宋體」一個正常的Web安全字體測試您的規則，這是網絡安全的字體列表： http://www.w3schools.com/cssref/css_websafe_fonts.asp

如果該工作那麼問題可能是像林蛙建議，你應該添加字體面定義規則： http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

如果正常的Web安全字體仍然不工作，你可能有另一個更強的規則，壓倒這一條。 您可以通過在瀏覽器中檢查該元素（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/

（圖片摘自this blog post :)

Answer 3

如果您正在使用較新的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; 

}