似乎無法改變字體類型

我有雜項文件的文件一對夫婦的自定義字體：似乎無法改變字體類型

我的index.html文件看起來是這樣的：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>My Website</title> 
    <link rel="stylesheet" href="css/style.css" > 
</head> 
<body> 
    <h3 style = "font-family: customBold;">Hello</h3> 
    <h3 style = "font-family: customLight;">Hello</h3> 
    <h3 style = "font-family: customRegular;">Hello</h3> 
    <h3 style = "font-family: customThin;">Hello</h3> 
</body> 
</html>

我的style.css看起來是這樣的

@font-face { 
    font-family: customBold; 
    src: url(fonts/Custom-Bold.otf); 
} 

@font-face { 
    font-family: customLight; 
    src: url(fonts/Custom-Light.otf); 
} 

@font-face { 
    font-family: customRegular; 
    src: url(fonts/Custom-Regular.otf); 
} 

@font-face { 
    font-family: customThin; 
    src: url(fonts/Custom-Thin.otf); 
}

但是，h3的字體不會改變。

我也跟着這樣的：

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

來源

2015-09-07 KeyboardNinja

你把所有的字體文件夾* CSS /字體裏面*？ – Blip

如果您正在使用調試器爲您的瀏覽器，您將選擇任何錯誤/丟失的文件等。對開發者來說，這是一個很棒 – jtheman

index.html和style.css位於主項目目錄中。那個叫做「字體」的另一個目錄裏面包含了.otf文件？ – KeyboardNinja

嘗試使用所有類型，如雜項文件，.eot，.TTF等添加此類型CSS文件。

很少的類型的不同的瀏覽器不支持。考慮http://caniuse.com/#feat=ttf

查找到下面的代碼，我們如何才能增加大家對不同的瀏覽器工作所需的格式。從https://css-tricks.com/snippets/css/using-font-face/

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}

參考參考此鏈接以獲取更多信息（類似的問題），Using .otf fonts on web browsers

來源

2015-09-07 12:44:54

似乎無法改變字體類型

回答

相關問題